Breaking News: Grepper is joining You.com. Read the official announcement!

styled jsx

shahul answered on November 7, 2023 Popularity 6/10 Helpfulness 10/10

answer styled jsx

styled jsx

Comment

// https://www.smashingmagazine.com/2020/09/comparison-styling-methods-next-js/#styled-jsx
// https://github.com/vercel/next.js/blob/canary/examples/with-styled-jsx/pages/index.tsx

export default function Home() {
  return (
    <div className="hello">
      <p>Hello World</p>

      <style jsx>{`
        .hello {
          font: 15px Helvetica, Arial, sans-serif;
          background: #eee;
          padding: 100px;
          text-align: center;
          transition: 100ms ease-in background;
        }
        .hello:hover {
          background: #ccc;
        }
      `}</style>
    </div>
  )
}

Popularity 6/10 Helpfulness 10/10 Language javascript

Source: www.smashingmagazine.com

Tags: javascript styled-jsx

Link to this answer
Share Copy Link