Comments (2)
Hello!
No, we have not supported that :)
Do you think that this thing is really useful?
For me, it's a little bit ambiguous, because our styled primitives are just about styles and view, not about logic that we can create via attributes. And I think that it should be more clear to do this thing like:
const Input = styled('input')({
color: 'palevioletred',
fontSize: '1em',
border: '2px solid palevioletred',
borderRadius: '3px',
margin: props => props.margin,
padding: props => props.padding,
})
const PasswordInput = props => <Input type="password" {...props} />
You can also define some abstract HOCs and use compose from recompose
for better reusability:
const withPasswordType = Comp => props => <Comp type="password" {...props} />
const withPadding = Comp => props => <Comp padding={props.size || '1em'} {...props} />
const withMargin = Comp => props => <Comp margin={props.size || '1em'} {...props} />
const MyInput = compose(
withPasswordType,
withPadding,
)(Input)
const MyAnotherInput = compose(
withPadding,
withMargin
)(Input)
const MyThirdInput = compose(
withPasswordType
withPadding,
withMargin,
)
You can check an example here
So I'd prefer to stay with concise API and clear responsibility :)
But it's open for discussion of course.
from styled-jss.
Thanks for the answer!
So I'd prefer to stay with concise API and clear responsibility :)
But it's open for discussion of course.
Completely understand. This is what I'm doing right now.
If the intention is to keep the clear separation of responsibility I think that's a better decision in the end.
Thanks!
from styled-jss.
Related Issues (20)
- Overriding component style HOT 2
- Border property HOT 2
- Support Observables from JSS9
- What about keyframes animation? HOT 7
- Add plugins without re-exporting styled HOT 6
- react-jss and styled-jss in the same app HOT 3
- Remove isObservable checks
- SSR Support for styled-jss
- SSR Support HOT 1
- Media queries don't work when using theming function HOT 9
- Bug: Nested composition causes invalid tag to be rendered HOT 1
- Support getting the ref of the wrapped component
- Add a way to filter props when extending other components
- Type Definitions HOT 1
- Mixing style objects and functions messes up specificity resolution HOT 1
- Composing function styles causes dynamic styles to not be used
- @global is not working HOT 4
- Component Name as the class name for easier debugging?
- How to install styled-jss when used in a library HOT 1
- Dynamic import styled-jss
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from styled-jss.