CSS-in-JS

Examples

Mevcut herhangi bir CSS-in-JS çözümünü kullanmak mümkündür. En basit olanı satır içi stillerdir:

function HiThere() {
  return <p style={{ color: 'red' }}>hi there</p>
}
 
export default HiThere

İzole edilmiş kapsamlandırılmış CSS desteği sağlamak için styled-jsx paketini paketliyoruz. Amaç, ne yazık ki sunucu oluşturmayı desteklemeyen ve yalnızca JS olan Web Bileşenlerine benzer "gölge CSS" yi desteklemektir .

Diğer popüler CSS-in-JS çözümleri (Styled Components gibi) için yukarıdaki örneklere bakın.

styled-jsx kullanan bir bileşen aşağıdaki gibi görünür:

function HelloWorld() {
  return (
    <div>
      Hello world
      <p>scoped!</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

Daha fazla örnek için lütfen styled-jsx belgelerine bakın.

Disabling JavaScript

Evet, JavaScript'i devre dışı bırakırsanız CSS üretim derlemesinde yüklenmeye devam edecektir (next start). Geliştirme sırasında, Hızlı Yenileme ile en iyi geliştirici deneyimini sağlamak için JavaScript'in etkinleştirilmesini istiyoruz.