Using the HTML style Tag to Style a React Component
Tags: css, javascript, react, softwaredevelopment
Published: 2024-01-19 21:23:02

There are many ways to [style a component in React](https://reactjs.org/docs/faq-styling.html), 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`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style) element!

> The `<style>`[HTML](https://developer.mozilla.org/en-US/docs/Web/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.

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:

```javascript
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](https://html.spec.whatwg.org/). As stated [here](https://html.spec.whatwg.org/#the-style-element), `<style>` should be used where metadata content is expected, or in a [`noscript`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/noscript) element that is a child of a [`head`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/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](https://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:

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

And importing it in the component as follows:

```javascript
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](https://reactjs.org/docs/faq-styling.html#what-is-css-in-js) approach, as follows:

```javascript
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.
  
***
_The post "[Using the HTML style Tag to Style a React Component](https://writech.run/blog/using-the-html-style-tag-to-style-a-react-component-b3203e8eb0d9/)" appeared first on [Writech](https://writech.run)._