<Button>Hello World</Button>
<Button sx={{ backgroundColor: 'red' }} >sx</Button>
sx
uses the theme (red is lighter than the browser default).<Button css='background-color: red'>css</Button>
css
sets raw CSS properties.<Button className='red'>classname</Button>
className
prepends a class name. But it can be overriden by the theme since Emotion appends a custom classname at the end. Use with care.<Button className='red-important'>classname</Button>
!important
in the CSS property. It's a hack.