Styled Components Plugin

About styled-components

styled-components is a popular CSS-in-JS implementation library, which uses the new JavaScript feature Tagged template to write component CSS styles.

Rsbuild provides compile-time support for styled-components, improve the debugging experience and add server-side rendering support to styled-components.

For details, please refer to Rspack#styledComponents.

Quick Start

Install Plugin

You can install the plugin using the following command:

npm add @rsbuild/plugin-styled-components -D

Register Plugin

You can register the plugin in the rsbuild.config.ts file:

import { pluginStyledComponents } from '@rsbuild/plugin-styled-components';

export default {
  plugins: [pluginStyledComponents()],


After registering the plugin, you can use styled-components to write styles:

import styled from 'styled-components';

const div = styled.div`
  color: red;

console.log('div', div);


If you need to customize the compilation behavior of styled-components, you can use the following configs.

You can check the styled-components documentation to learn how to use it.

  • Type:
type StyledComponentsOptions = {
  displayName?: boolean;
  ssr?: boolean;
  fileName?: boolean;
  meaninglessFileNames?: string[];
  namespace?: string;
  topLevelImportPaths?: string[];
  transpileTemplateLiterals?: boolean;
  minify?: boolean;
  pure?: boolean;
  cssProps?: boolean;
  • Default:
  displayName: true,
  // `isSSR` is true in SSR build
  ssr: isSSR,
  // `pure` is enabled in production to reduce bundle size
  pure: isProd,
  transpileTemplateLiterals: true,
  • Example:

When the value is an Object, use the Object.assign function to merge with the default config.

export default {
  plugins: [
      pure: true,