Styled JSX in Next.js

Adding global Styled JSX

Styled JSX allows us to add global styles using <style jsx global>. An excellent approach to applying global styles to all pages is to first create a layout component with the global styles and wrap all pages.

function Root() {
  return (
    <div className="container">
      <h1>Next.js Example with global jsx</h1>
      <style jsx>{`
        .container {
           padding: 20px;
           margin: 80px;
        }
        h1 {
          line-height: 1.5;
          color: pink;
        }
      `}</style>
      <style jsx global>{`
        h1 {
          color: blue;
          font-size: 18px;
        }
      `}</style>
    </div>
  )
}

export default Root

You can also try this code with Online Javascript Compiler

Run Code

Output:

One-off global selectors

At times, we need to override a particular style of a child component. To do this, Styled JSX provides: global(), giving access to one-off global selectors.

import Widget from '../components/Widget'

function Root() {
  return (
    <div className="container">
      <h1>Next.js Example</h1>
      <Widget />
      <style jsx>{`
        .container {
           padding: 20px;
           margin: 80px;
        }
        .container :global(.btn) {
          background: #000000;
          color: #ffffff;
        }
      `}</style>
    </div>
  )
}

export default Root

You can also try this code with Online Javascript Compiler

Run Code

Output:

Dynamic styles

With Styled JSX, we can adapt the styling of a component based on its props is a significant advantage of CSS-in-JS libraries.

function Alert(props) {
  return (
    <div className="alert">
      {props.children}
      <style jsx>{`
        .alert {
          display: flex;
          padding: 15px;
          margin: 10px;
          border-radius: 5px;
        }
      `}</style>
      <style jsx>{`
        .alert {
          margin: 10px;
          background: ${props.type == 'warning' ? '##fff4d2' : '#efefef'};
        }
      `}</style>
    </div>
  )
}

export default Alert

You can also try this code with Online Javascript Compiler

Run Code

Note: We have placed the dynamic style into a separate <style jsx> tag. It isn't required, but splitting up the static and dynamic parts is recommended.

If the Alert element passes a type prop with a warning value like:

<Alert type="warning">This is a warning message</Alert>

The component will own an orange background. Without the type prop, the background would fall back to the default grey color.

Frequently Asked Questions

1. What is Next.js?

Next.js is an open-source development framework made on top of Node.js, allowing React-based web applications functionalities such as server-side generating and rendering of static websites.

2. What are the benefits of using Next.js?

Next.js comes with numerous features that translate into benefits for business and marketing and the development process. The most meaningful thing that developers love is reusable components. As for business, it cuts the development costs. As for developers, it cuts the development time.

3. Is Next JS frontend or backend?

NextJS is a frontend framework in that it is ReactJS, React-DOM with a NextJS development server for server-side rendering. As such, it is not expected for browser-based JavaScript to be necessary.

4. What is Styled JSX?

Styled JSX is a CSS-in-JS library that lets you write encapsulated and scoped CSS to style your components. The styles you make for one component won't impact other's features. Allowing you to add, modify and delete styles without stressing unintended side effects.

Key Takeaways

This article teaches about Styled JSX and how we use them. We saw why Styled JSX could be beneficial for a developer to learn. Click here to read about Angular Vs. React.

Click here to see other related blogs on Next.js.

Check out our Web development course and blogs on Frontend Web Technologies.

If you are preparing for your DSA interviews then, Coding Ninjas Studio is a one-stop destination. This platform will help you acquire effective coding techniques and overview student interview experience in various product-based companies.

Happy Learning!