CMS React styling

• Tailwind
• styled-components
• styled-jsx
• CSS Modules
  • Dynamic styles based on props
• Using other CSS-in-JS libraries

​

Tailwind

• Add the tailwindcss dependency to your package.json file in the JavaScript asset folder.

{
  "name": "my-react-app",
  "version": "0.1.0",
  "type": "module",
  "dependencies": {
    ...
    "tailwindcss": "^3.3.2"
  }
  ...
}

• Add a Tailwind configuration file to your project subcomponent.

import { fileURLToPath } from "url";
const componentsDir = fileURLToPath(new URL("./components", import.meta.url));

export default {
  content: [`${componentsDir}/**/*.{js,ts,jsx,tsx}`],
  theme: {
    extend: {},
  },
  plugins: [],
};

• Add a PostCSS configuration file to your project subcomponent, then import the Tailwind configuration file and include Tailwind as a plugin along with any Tailwind-specific configuration.

import tailwind from "tailwindcss";
import autoprefixer from "autoprefixer";
import postcssNested from "postcss-nested";
import tailwindConfig from "./tailwind.config.js";

export default {
  plugins: [tailwind(tailwindConfig), postcssNested, autoprefixer()],
};

• Create a tailwind.css file in your styles directory. Then, import that file in your top-level component with the base Tailwind layer directives.

​

styled-components

• Add the styled-components dependency to your package.json file in the JavaScript asset folder.

{
  "name": "my-react-app",
  "version": "0.1.0",
  "type": "module",
  "dependencies": {
    ...
    "styled-components": "^6.0.3"
  }
  ...
}

• Create a registry component using the styled-components server-side rendering API and useInlineHeadAsset(), and wrap the components you want to style in it. See the StyledComponentsRegistry.jsx example file for more details.
• For each island you’re using, you must wrap each subtree in a registry to capture styles when rendering on the server. To make this easier, you may use the Wrapper prop on the Island component to wrap the contents without needing to edit the island components themselves. Note that this prop also lets you configure this once by replacing all instances of <Island /> with a <StyledIsland /> component that looks similar to the following:

import { Island } from "@hubspot/cms-components";
import StyledComponentsRegistry from "./StyledComponentsRegistry?client";

export default function StyledIsland(props) {
  return <Island {...props} Wrapper={StyledComponentsRegistry} />;
}

• You can now import styled from 'styled-components' and use it to style your components.

import { useState, useId } from "react";
import { styled } from "styled-components";

const StyledButton = styled.button`
  padding: ${props => 10 + props.$count * 10}px;
`;

export default function InteractiveStyledComponent() {
  const id = useId();
  const [count, setCount] = useState(0);

  return (
    <StyledButton $count={count} onClick={() => setCount(prevCount => prevCount + 1)}>
      Current count is: {count} {id}
    </StyledButton>
  );
}

​

styled-jsx

• Add the styled-jsx-components dependency to your package.json file in the JavaScript asset folder.

{
  "name": "my-react-app",
  "version": "0.1.0",
  "type": "module",
  "dependencies": {
    ...
    "styled-jsx": "^5.1.2"
  }
  ...
}

• Create a registry component using the server-side rendering API and useInlineHeadAsset(). See the StyledJSXRegistry.jsx example file for more details.
• The styled-jsx registry component must also be wrapped on any <Island> usage to prevent hydration mismatches or missing styles on initial load. Note that styled-jsx's implementation depends on useId() hooks in a way that can cause mismatches if not properly configured. See the StyledJSXIsland.jsx example file for an easier pattern of replacing all direct <Island /> usage.

import { Island } from "@hubspot/cms-components";
import StyledComponentsRegistry from "./StyledComponentsRegistry?client";

export default function StyledIsland(props) {
  return <Island {...props} Wrapper={StyledComponentsRegistry} />;
}

• You can now use styled-jsx to style your components, including <style jsx>{`/_ CSS here _/`}</style> patterns. See example below, which is copied from the InteractiveStyledJSXComponent.jsx example file.

import { useState, useId } from "react";

export default function InteractiveStyledJSXComponent() {
  const id = useId();
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(prevCount => prevCount + 1)}>
      Current count is: {count} {id}
      <style jsx>
        {`
          button {
            padding: ${10 + count * 10}px;
          }
        `}
      </style>
    </button>
  );
}

​

CSS Modules

import classes from './example.module.css';

export default function MyComponent() {
  return <div className={classes.red}>red text</div>;
}

.red {
  color: red;
}

/* How to have global—non-namespaced—styles in CSS modules */
:global(html) {
  border: 6px solid SteelBlue;
}

• A <style> tag will automatically be inserted into the page when the component is rendered server-side or when it’s dynamically rendered in the browser.
• Those styles will automatically be namespaced so they don’t interfere with anything else on the page.

​

Dynamic styles based on props

• If you need conditional styling that is either on or off, you can have a className that the React component code conditionally renders in your JSX.
• If you need dynamic styling that is not on or off, but rather a specific color or number that you need to apply to your styles:
  • You can define CSS custom properties in your CSS or CSS Modules code and inject new CSS custom property values via React.
  • Or use React to set inline styles on the specific part of the module HTML.

import styles from './example2.module.css';

export default function FancierComponent(props) {
const { hasPurpleBorder, paddingPx, customSecondTextColor } = props;

// Example: toggling styles via a prop
const classes = [styles['fancy-module-wrapper']];
  if (hasPurpleBorder) {
  classes.push(styles['purple-border']);
}

// Example: using inline style attribute (with React's style syntax)
const inlineStyles = { padding: paddingPx };

// Example: setting a CSS custom property value that's picked up by other CSS
const inlineAndCustomPropertyStyles = {
  ...inlineStyles,
  '--second-text-color': customSecondTextColor,
};

return (
<div className={classes.join(' ')} style={inlineAndCustomPropertyStyles}>
  <p>First text</p>
  <p className={styles['second-text']}>Second text</p>
</div>
);
}

.fancy-module-wrapper {
}

.purple-border {
border: 2px solid rebeccapurple;
}

.second-text {
color: var(--second-text-color, mediumvioletred);
}

​

Using other CSS-in-JS libraries