Styling a React Application With Stitches

This smart utility library can take care of your styling needs.

Stitches is a modern CSS-in-JS library that provides a powerful and flexible way to style your React applications. It offers a unique approach to styling that combines the best parts of CSS and JavaScript, allowing you to create dynamic styles easily.

Styling your React application using stitches is similar to using the styled-components library. Considering that stitches and styled-components are both CSS-in-JS libraries that allow you to write styles in JavaScript.

Before styling your React application, you must install and set up the stitches library. To install the library using npm, run the following command in your terminal:

Alternatively, you can install the library using yarn with this command:

Once you have installed the stitches library, you can begin styling your React application.

To create styled components, the stitches library provides a styled function. The styled function lets you create styled components that combine CSS styles and the logic of components.

The styled function takes two arguments. The first is an HTML/JSX element, and the second is an object that contains the CSS properties to style it.

Here's how you can create a styled button component using the styled function:

The code block above creates a Button component with a dark background color, gray text color, a border radius, and some padding. Note that you write the CSS properties in camelCase, not kebab-case. This is because camelCase is a more common way of writing CSS properties in JavaScript.

Once you have created the styled button component, you can import it into your React components and use it.

For example:

This example uses the Button component in an App component. The button will adopt the styles you passed to the styled function, making it look like this:

The styled function also lets you nest CSS styles, with a similar syntax to the SASS/SCSS extension language. This makes it easier for you to organize your styles and make your code more readable.

Here is an example using the nested styles technique:

This code uses nested CSS styles and a pseudo-class to target the Button component. When you hover over the button, the nested selector &:hover changes the button's background and text colors.

If you're uncomfortable creating styled components, the stitches library offers the css function, which can generate class names to style your components. The css function takes a JavaScript object with CSS properties as its only argument.

Here’s how you can style your components using the css function:

The css function creates the CSS styles for the button which this code then assigns to the buttonStyle variable. The buttonStyle function generates a class name for the defined styles, which is then passed to the className prop of the button component.

Using the stitches library, you can also define global styles for your application using the globalCss function. The globalCss function creates and applies global styles to your React application.

After defining your global styles using globalCSS, call the function in your app component to apply the styles to your application.

For example:

This example defines the styles for the body element using the globalCss function. The call sets the background color to #f2f2f2 and the text color to #333333.

One of the more powerful features of the stitches library is its ability to create dynamic styles. You can create styles that depend on React props with the variants key. The variants key is a property of both the css and styled functions. You can create as many variants of your component as you want.

For example:

This code creates a Button component with a color variant. The color variant allows you to change the button's color based on a color prop. Once you have created the Button component, you can use it in your application.

For example:

Once you render this application, two buttons will display on your interface. The buttons will look like the image below.

The stitches library allows you to create a set of design tokens that define the visual aspects of your UI, such as colors, typography, spacing, and more. These tokens help maintain consistency and make updating your application's overall styles look easy.

To create these theme tokens, use the createStitches function. The createStitches function from the stitches library allows you to configure the library. Ensure to use the createStitches function in a stitches.config.ts file or a stitches.config.js file.

Here is an example of how to create a theme token:

Now that you have defined your theme tokens, you can use them in your component styles.

The code block above uses the color tokens $gray and $black for the background and text color of the button. It also uses the space tokens $1 and $3 to set the padding of the button and the font size variable $1 to set the font size of the button.

The stitches library provides a powerful and flexible way to style your React applications. With features like styled components, dynamic styles, and globalCSS, you can easily create complex designs. Whether you're building a small or large React application, stitches can be an excellent choice for styling.

A great alternative to the stitches library is the emotion library. Emotion is a popular CSS-in-JS library that allows you to write styles in JavaScript. It is easy to use and offers many features for creating great styles for your application.

Chinedu is a software developer and technical writer, passionate about publishing technical content that helps developers improve their coding skills and solve coding problems.

Victor has expertise in web programming languages like CSS, HTML, and JavaScript, as well as frameworks and libraries like Angular, Vue.js, Nuxt.js, and Express.js.