Write styles scoped to your component and use standard css selectors to target children.
Due to its tiny size, restyles makes the perfect companion for glamorous.
Function to render your children. Its only argument is a class name that you can apply to an element of your choice.
Usually this is the outermost element(s) of your children.
render takes precedence over children
use render for better performance
css object|array<object>
Your css as an object. This is passed straight through to cxs.
'@media (min-width: 500px) and (orientation: landscape)':{
'.inner':{
color:'purple',
fontSize:48
}
}
}}
render={cls=>(
<divclassName={cls}>
blue
<divclassName={'profile'}>
red
<divclassName={'username'}>
green
<divclassName={'three'}>
<spanclassName={'inner'}>test</span>
</div>
</div>
</div>
</div>
)}
/>
)
render fn
takes precedence over children
Function to render your children. Its only argument is a class name that you can apply to an element of your choice.
Usually this is the outermost element(s) of your children.