Global styling is an anti-pattern, use them sparingly. In all CSS templates you can emit global styles:
class Button extends Component {
@css({
'.btn-rendered': {
// ...
}
})
render() {
// ...
}
}
To make your component's styles conditional on some parent global class name, better use
nesting operand &
instead of global styles (however it is an anti-pattern as well):
const Frame = css.styled({
'.is-mobile &': {
// Make the frame look different on mobile.
}
});
freestyler
exposes a convenience function global(static, dynamic)
to emit global styles:
import {global} from 'freestyler/globals';
const CssReset = global({
'*': {
pad: 0,
mar: 0,
}
});
<CssReset />
Here is how you can create a simplified version yourself:
const Null = () => null;
const global = template => css.styled(Null)({':global': template});
You can use it to, for example, write your own CSS reset, or use one of many shipped with freestyler
:
import {global} from 'freestyler/globals';
const CssReset = global({
html: {
bxz: 'border-box',
fz: '16px',
},
'*, *:before, *:after': {
bxz: 'inherit',
},
'body, h1, h2, h3, h4, h5, h6, p, ol, ul': {
mar: 0,
pad: 0,
fw: 'normal',
},
});
<CssReset />
Customize global styles with props and make global styles change dynamically as your theme changes:
import {global} from 'freestyler/globals';
const DynamicGlobalStyles = global(null, ({background, theme}) => ({
body: {
background,
// Change global styles dynamically as `theme` mutates.
col: theme.textColor,
}
}));
<DynamicGlobalStyles background="#eee" />
Create a css-prop <Style>
component:
import {global} from 'freestyler/globals';
const Style = ({children}) => {
const EmitCss = global(null, () => children);
return <EmitCss/>;
};
Now use it anywhere in your JSX like this:
// Matrix theme.
<div>
<Style>{{
body: {
background: 'black',
color: 'green',
}
}}</Style>
</div>
// Is Neo the chosen one? Or is it papa biceps?