Using the HTML style Tag to Style a React Component

There are many ways to style a component in React, but some are more popular than others. Let’s say you want to use raw CSS. Also, for the sake of simplicity, you do not want to externalize your style definition into another file.

Did you know this is actually possible in vanilla React? And how can you achieve this goal? Thanks to the HTML style element!

The <style>HTML element contains style information for a document, or part of a document. It contains CSS, which is applied to the contents of the document containing the <style> element. — <style>: The Style Information element

So, let’s see how to use the HTML style tag to define a single-file React component with the style defined in raw CSS.

Styling a Component with <style>

Using <style> to style a component is very easy, as you can see below:

export default function FooDiv() {
  return (
    <>
      <style>
        {
          `.fooDiv {
                background-color: red;
                color: white;
                font-size: 2em
            }`
        }
      </style>
      <div className="fooDiv">{"Hello World!"}</div>
    </>
  );
}

Keep in mind that this use of <style> does not meet the current HTML specification. As stated here, <style> should be used where metadata content is expected, or in a noscript element that is a child of a head element. In other words, it should not be used inside of the body tag. On the other hand, all the modern browsers support this usage, and even Google.com currently relies on it.

<style> vs External Style Files

Employing <style> in the component definition is just like defining the following style.css file:

.fooDiv {
    background-color: red;
    color: white;
    font-size: 2em
}

And importing it in the component as follows:

import "./style.css"

export default function FooDiv() {
  return (
      <div className="fooDiv">{"Hello World!"}</div>
  );
}

This last approach is one of the most popular, but it involves two files. On the contrary, by using <style> you can define a styled component with just one file while using raw CSS.

<style> vs CSS-in-JS

You can define a styled component with the CSS-in-JS approach, as follows:

export default function FooDiv() {
  return (
    <div style={{ backgroundColor: "red", color: "white", fontSize: "2em" }}>
      {"Hello World!"}
    </div>
  );
}

This allows you to keep your styled component definition in just one file, but it involves the CSS-in-JS syntax. Instead, by adopting the HTML style tag you can use raw CSS.

Conclusion

There are almost endless ways to style a component in React, but using the HTML style element is one of the most creative and unusual. This approach allows you to use raw CSS while reducing your styled component definition to just one file. Thus, it combines the main characteristics of the external style file approach and the CSS-in-JS one. Using <style> is easy, and showing how to do it what was this article was about.

Thanks for reading! I hope that you found my story helpful.