- They like to expand
- They can cause explosions
- They tend to stink
const MyComponent = ({children}) => (
<div style="border: 1px dotted dodgerblue; background-color: whitesmoke;">
{children}
</div>
)
//... usage
return (
<div>
<MyComponent>
This is a styled component
</MyComponent>
<MyComponent>
This is another styled component
</MyComponent>
</div>
)
<div>
<div style="border: 1px dotted dodgerblue; background-color: whitesmoke;">
This is a styled component
</div>
<div style="border: 1px dotted dodgerblue; background-color: whitesmoke;">
This is another styled component
</div>
</div>
const fancyStyles = {
border: '1px dotted dodgerblue',
backgroundColor: 'whitesmoke'
}
const MyFancierComponent = ({children}) => (
<div style={fancyStyles}>
{children}
</div>
)
//... usage
return (
<div>
<MyComponent>
This is a styled component
</MyComponent>
<MyComponent>
This is another styled component
</MyComponent>
</div>
)
<div>
<div style="border: 1px dotted dodgerblue; background-color: whitesmoke;">
This is a styled component
</div>
<div style="border: 1px dotted dodgerblue; background-color: whitesmoke;">
This is another styled component
</div>
</div>
import styled from 'styled-components';
const StyledComponent = styled.div`
border: 1px dotted dodgerblue;
background-color: whitesmoke;
`
//...composable too!
const ExtendedComponent = styled(StyledComponent)`
padding: 35px;
`
//... usage
return (
<div>
<StyledComponent>
This is a styled-components component
</StyledComponent>
<StyledComponent>
This is another styled-components component
</StyledComponent>
<ExtendedComponent>
This is an extended styled-components component
</ExtendedComponent>
</div>
)
<div>
<div class="sc-hMqMXs">
This is a styled-components component
</div>
<div class="sc-hMqMXs">
This is another styled-components component
</div>
<div class="sc-iAyFgw">
This is an extended styled-components component
</div>
</div>
Caveat: `styled(Element)` works like a SASS mixin
💅