render(
<div
css={{
      color:'darkorchid',
      backgroundColor:'lightgray'
}}
>
    This is darkorchid.
</div>
)

import styledfrom'@emotion/styled'
const Button= styled.button(
{
    color:'darkorchid'
},
props=>({
    fontSize: props.fontSize
})
)
render(<ButtonfontSize={16}>This is a darkorchid button.</Button>)

render(
<div
css={{
      color:'darkorchid',
'& .name':{
        color:'orange'
}
}}
>
    This is darkorchid.
<divclassName="name">This is orange</div>
</div>
)

render(
<div
css={{
      color:'darkorchid',
'@media(min-width: 420px)':{
        color:'orange'
}
}}
>
    This is orange on a big screen and darkorchid on a small screen.
</div>
)

render(
<div
css={{
      padding:8,
      zIndex:200
}}
>
    This has 8px of padding and a z-index of 200.
</div>
)

render(
<div
css={[
{ color:'darkorchid'},
{ backgroundColor:'hotpink'},
{ padding:8}
]}
>
    This is darkorchid with a hotpink background and 8px of padding.
</div>
)

render(
<div
css={{
      background:['red','linear-gradient(#e66465, #9198e5)'],
      height:100
}}
>
    This has a gradient background in browsers that support gradients and is red
    in browsers that don't support gradients
</div>
)

import{ css}from'@emotion/react'
const hotpink=css({
  color:'hotpink'
})
render(
<div>
<pcss={hotpink}>This is hotpink</p>
</div>
)

import{ css}from'@emotion/react'
const hotpink=css({
  color:'hotpink'
})
const hotpinkHoverOrFocus=css({
'&:hover,&:focus': hotpink
})
const hotpinkWithBlackBackground=css(
{
    backgroundColor:'black',
    color:'green'
},
  hotpink
)
render(
<div>
<pcss={hotpink}>This is hotpink</p>
<buttoncss={hotpinkHoverOrFocus}>This is hotpink on hover or focus</button>
<pcss={hotpinkWithBlackBackground}>
      This has a black background and is hotpink. Try moving where hotpink is in
      the css call and see if the color changes.
</p>
</div>
)