About
Styled component is a Css In Js solution.
Utilising tagged template literals and the power of CSS, styled-components allows you to write actual CSS code to style your components.
styled-components
- removes the mapping between components and styles
- is compatible with both React (for web) and ReactNative
- generate an actual stylesheet with classes at the end of the head of the document during runtime
- attached the generated classes to the DOM nodes of styled components via the React className prop
- does not use inline styles,
Articles Related
Syntax
// for a HTML tag
styled.h1
// for a custom component
styled('my-component')
Library
Sass-style helper functions: polished lightweight package tailor-made for styles in JavaScript.
Example
Example 1
With version 3.4.9
- All declarations will be prefixed
var style = `
padding: 2em 1em;
background: papayawhip;
`;
- pseudo selectors work as well
style = `${style}
&:hover {
background: palevioletred;
}
`;
- media queries are not a problem and nested rules work as expected
style = `${style}
@media (max-width: 600px) {
background: tomato;
/* nested rules work as expected */
&:hover {
background: yellow;
}
}
`;
- descendant-selectors work as well, but are more of an escape hatch
style = `${style}
> p {
text-decoration: underline;
}
`;
- Contextual selectors work as well
style = `${style}
html.test & {
display: none;
}
`;
const Example = styled.default.div`${style}`;
- Rendering
ReactDOM.render(
<Example>
<p>Hello World!</p>
</Example>,
document.getElementById('root')
)
<div id="root">
<!-- This div's content will be managed by React. -->
</div>
Example 2
With version 3.4.9
const Button = styled.default.button`
font-family: "the-font";
color: #3b9fe2;
/* White background */
background-color: rgba(224, 90, 184, 0.51);
border: 0px;
margin: 2px;
padding:2em;
vertical-align: middle;
font-style: normal;
font-weight: normal;
speak: none;
display: inline-block;
text-decoration: inherit;
text-align: center;
font-variant: normal;
text-transform: none;
/* fix buttons height, for twitter bootstrap */
line-height: 1em;
&:before {
${ props => props.plus && 'content: \'\\e800\';' }
${ props => props.minus && 'content: \'\\e801\';' }
}
`;
- Rendering
ReactDOM.render(
<Button>
Hello World!
</Button>,
document.getElementById('app')
)
<div id="app">
<!-- This div's content will be managed by React and contains the components rendering -->
</div>
Note
- Global Css
import { injectGlobal } from 'styled-components'
injectGlobal`
body {
margin:0;
padding:0;
}
`
import styled, {keyframes, ThemeProvider } from 'styled-components'
`
${ props => props.backwards && 'animation-direction: reverse;'}
${ props => props.inverseColor ? 'color: black;' : 'color: blue;'}
color : ${ props => props.inverseColor ? 'black' : 'blue'};
background-colour: ${ props => props.theme.bg || 'black' }
`
- Theme
props => props.theme.inverseColor
<ThemeProvider theme={{
alternateTheme: true;
}}>
<Header uppercase>
</ThemeProvider>
- Default export
export default () => (
<Header>
<Logo>
</Header>
)
- export css in an otther file
in the client
import styles from './styles'
styled.div`
${ styles.headerStyle}
`
- in the module
import { css } from 'styled-components'
export default {
headerStyle: css`
height:150px;
padding: 200px;
`
}