Styled Components: Styled CSS Where React Rules!
Styled Components: Styled CSS Where React Rules!
What are styled components?
Styled-components uses tagged template literals to style the components. It removes the mapping between components and styles which means that when you’re defining your styles you’re actually creating a normal ReactJS component, that has your styles attached to it.
Work around:
- Create a Title component that’ll render a <h1> tag with some styles.
const Title = styled.h1` font-size: 1.5em; text-align: center; color: blue; `;
- Use Title like any other React component – except they’re styled.
render( <Title> I am a styled Component! </Title> );
Playing with props, made it easier! How? That’s explained: You can pass a function/any prop to a styled component’s template literal to adapt it based on its props.
Work around:
const Button = styled.button`
/* Adapt the colours based on primary prop */
background: ${props => props.primary ? 'red' : 'white'};
color: ${props => props.primary ? 'white' : 'red'};
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border: 2px solid blue;
border-radius: 3px;
`;
- That’s how you render it.
render( <div> <Button>Normal</Button> <Button primary>Primary</Button> </div> );
Style any Component: You can give style to any of the user-defined/third- party components as long as they’re accepting the className prop. Work around:
/* This could be react-router's Link for example */
const Link = ({ className, children }) => (
<a className={className}>
{children}
</a>
);
/* Extend the properties of Link */
const StyledLink = styled(Link)`
color: blue;
font-weight: bold;
`;
- And here you render it.
render( <div> <Link>Unstyled Link</Link> <br /> <StyledLink>Styled Link</StyledLink> </div> );
Extending Styles: Styled components have made it pretty easier to extend a component to generate another. You give style to any component by inheriting it’s default properties (duplicate styles are overrided). Work around:
- The Button without any extension of props.
const Button = styled.button` color: palevioletred; font-size: 1em; margin: 1em; padding: 0.25em 1em; border: 2px solid blue; border-radius: 3px; `;
- We’re extending Button with some extra styles.
const RedButton = Button.extend` color: red; border-color: red; `;
- See it working.
render( <div> <Button>Normal Button</Button> <RedButton>Red Button</RedButton> </div> );
Note: Applying extend property creates a new stylesheet by extending the old one, and thus doesn’t generate two classes. This is how you make everything look as you want without any extra effort, and this is what React want us to do (Component Based Structure).