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.
Setting Up Stitches
Styling your React application usingstitchesis similar tousing the styled-components library. Considering that stitches andstyled-componentsare 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 may begin styling your React application.
Creating Styled Components
To create styled components, the stitches library provides astyledfunction. The styled function lets you create styled components that combine CSS styles and the logic of components.
Thestyledfunction 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 thestyledfunction:
The code block above creates aButtoncomponent 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 may import it into your React components and use it.
For example:
This example uses theButtoncomponent in anAppcomponent. The button will adopt the styles you passed to thestyledfunction, making it look like this:
Thestyledfunction also lets you nest CSS styles, with a similar syntax tothe 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 theButtoncomponent. When you hover over the button, the nested selector&:hoverchanges the button’s background and text colors.
Styling With the CSS Function
If you’re uncomfortable creating styled components, thestitcheslibrary offers thecssfunction, which can generate class names to style your components. Thecssfunction takes a JavaScript object with CSS properties as its only argument.
Here’s how you can style your components using thecssfunction:
Thecssfunction creates the CSS styles for the button which this code then assigns to thebuttonStylevariable. ThebuttonStylefunction generates a class name for the defined styles, which is then passed to theclassNameprop of thebuttoncomponent.
Creating Global Styles
Using thestitcheslibrary, you can also define global styles for your application using theglobalCssfunction. The globalCss function creates and applies global styles to your React application.
After defining your global styles usingglobalCSS, call the function in yourappcomponent to apply the styles to your application.
This example defines the styles for thebodyelement using theglobalCssfunction. The call sets the background color to#f2f2f2and the text color to#333333.
Creating Dynamic Styles
One of the more powerful features of thestitcheslibrary is its ability to create dynamic styles. You can create styles that depend onReact propswith thevariantskey. Thevariantskey is a property of both thecssandstyledfunctions. You can create as many variants of your component as you want.
This code creates aButtoncomponent with acolorvariant. Thecolorvariant allows you to change the button’s color based on acolorprop. Once you have created theButtoncomponent, you can use it in your application.
Once you render this application, two buttons will display on your interface. The buttons will look like the image below.
Creating Theme Tokens
Thestitcheslibrary 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 thecreateStitchesfunction. ThecreateStitchesfunction from the stitches library allows you to configure the library. Ensure to use thecreateStitchesfunction in astitches.config.tsfile or astitches.config.jsfile.
Here is an example of how to create a theme token:
Now that you have defined your theme tokens, you’re able to use them in your component styles.
The code block above uses the color tokens$grayand$blackfor the background and text color of the button. It also uses the space tokens$1and$3to set the padding of the button and the font size variable$1to set the font size of the button.
Efficient Styling With Stitches
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.
