styled-css-modules-component
Build styled component with css-modules
styled-component
forces developers use clearer way to add styles to the components which looks great to me, but there are still some difficult unsolved issues in CSS-in-JS area, even after radium
, aphrodite
and a lot of libraries involved.
css-modules
is a good choice for getting modularization without being as cutting-edge as the CSS-in-JS approaches. You can just write css and get full superpower from PostCSS ecosystem!
Install
$ npm install styled-css-modules-component
Note: You have to setup your own css-modules environment.
Usage
Basic
styles.css
:
This creates two react components, <Title>
and <Wrapper>
:
;; ; // Create a <Title> react component that renders an <h1> which is// centered, palevioletred and sized at 1.5emconst Title = styled; // Create a <Wrapper> react component that renders a <section> with// some padding and a papayawhip backgroundconst Wrapper = styled;
You render them like so:
// Use them like any other React component – except they're styled!<Wrapper> <Title>Hello World this is my first styled css modules component!</Title></Wrapper>
Checkout full examples here.
Passed props
styles.css
:
Styled components pass on all their props. This is a styled <input>
:
;; ; // Create an <Input> component that'll render an <input> tag with some stylesconst Input = styledinputstylesinput;
You can just pass a placeholder
prop into the styled-css-modules-component
. It will pass it on to the DOM node like any other react component:
// Render a styled input with a placeholder of "@chentsulin"<Input ="@chentsulin" ="text" />
Checkout full examples here.
Third-party components
styles.css
:
The above also works perfectly for styling third-party components, like a react-router
<Link />
!
;; const StyledLink = styleslink;
<Link ="/">Standard unstyled Link</Link><StyledLink ="/">This Link is styled!</StyledLink>
Checkout full examples here.
Animations
Directly supported by CSS.
Overriding component styles & Theming
See the long discusses at css-modules #147.
React Native
Not supported.
Relevant Projects
License
MIT © C.T. Lin