Styling multiple elements with react-cxs

Header.js

const Header = () => {
  const cx = {
    root: {
      backgroundColor: colors.blue,
      color: colors.white,
      paddingBottom: space[4],
      paddingTop: space[4]
    },
    container: {
      margin: 'auto',
      maxWidth: '48rem'
    },
    header: {
      fontWeight: 'bold'
    },
    subheader: {
      fontWeight: 'normal'
    }
  }

  return (
    <header className={cx.root}>
      <div className={cx.container}>
        <h1 className={cx.header}>Header</h1>
        <h3 className={cx.subheader}>Subheader</h3>
      </div>
    </header>
  )
}