CSS-in-JS

function HiThere() {
  return <p style={{ color: 'red' }}>مرحبًا</p>
}

export default HiThere

function HelloWorld() {
  return (
    <div>
      مرحبًا بالعالم
      <p>محدد النطاق!</p>
      <style jsx>{`
        p {
          color: blue;
        }
        div {
          background: red;
        }
        @media (max-width: 600px) {
          div {
            background: blue;
          }
        }
      `}</style>
      <style global jsx>{`
        body {
          background: black;
        }
      `}</style>
    </div>
  )
}

export default HelloWorld