Styling components

Style Prop

Every component has a style prop that you can use to pass custom styles to the top-level element of the component.

Prop	Type	Default	Description
`style`	`CSSProperties`	-	Custom CSS styles (memoize to prevent re-renders)

⚠️ Performance Warning: Always memoize style objects to prevent unnecessary re-renders.

Example:

0xd8dA...6045

import React, { useMemo } from "react";
import { Address } from "@scaffold-ui/components";
import type { CSSProperties } from "react";
 
function MyComponent() {
  // Memoized style object
  const customStyle = useMemo(
    () =>
      ({
        padding: "16px",
        borderRadius: "8px",
        backgroundColor: "rgba(34, 197, 94, 0.1)",
      }) as CSSProperties,
    [],
  );
 
  return (
    <Address
      address="0x1234567890123456789012345678901234567890"
      style={customStyle}
    />
  );
}

Redefining Inner Styles

All Scaffold-UI component styles rely on the default tailwindcss theme variables defined in styles.css.

To change the inner styles of components, you need to:

Check the source code of the component to identify which variable is used for the desired style
Redefine the variable, and all dependent styles will update accordingly

For example, if you want to change the text color of the Address component, you can check the source code and see that the Address component has the class text-sui-primary-content, which uses the --color-sui-primary-content variable for the text color. Let's redefine it:

0xd8dA...6045

import React, { useMemo } from "react";
import { Address } from "@scaffold-ui/components";
import type { CSSProperties } from "react";
 
function MyComponent() {
  // Memoized style object
  const customStyle = useMemo(
    () =>
      ({
        "--color-sui-primary-content": "green",
        padding: "16px",
        borderRadius: "8px",
        backgroundColor: "rgba(34, 197, 94, 0.1)",
      }) as CSSProperties,
    [],
  );
 
  return (
    <Address
      address="0x1234567890123456789012345678901234567890"
      style={customStyle}
    />
  );
}