Skip to content
🚀 MUI X v6 is out! Discover what's new and get started now!
Edit this page

Themed components

Learn how to apply custom styles to components at the theme level.

Component identifier

If you've used Material UI before, you are probably familiar with this technique. To customize a specific component in the theme, specify the component identifier (Joy{ComponentImportName}) inside the components node.

  • Use defaultProps to change the default React props of the component.
  • Use styleOverrides to apply styles to each component slots.
    • Every Joy UI component contains the root slot.

Visit the components.d.ts file to see all component identifiers.

<span class="token keyword">import</span> <span class="token punctuation">{</span> CssVarsProvider<span class="token punctuation">,</span> extendTheme <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@mui/joy/styles'</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> theme <span class="token operator">=</span> <span class="token function">extendTheme</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">JoyChip</span><span class="token operator">:</span> <span class="token punctuation">{</span>
      <span class="token literal-property property">defaultProps</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token literal-property property">size</span><span class="token operator">:</span> <span class="token string">'sm'</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token literal-property property">styleOverrides</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token literal-property property">root</span><span class="token operator">:</span> <span class="token punctuation">{</span>
          <span class="token literal-property property">borderRadius</span><span class="token operator">:</span> <span class="token string">'4px'</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">function</span> <span class="token function">App</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">CssVarsProvider</span></span> <span class="token attr-name">theme</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>theme<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token operator">...</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">CssVarsProvider</span></span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

Theme default props

The values specified in the theme as defaultProps affect all instances of the component:

<span class="token function">extendTheme</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">JoyIconButton</span><span class="token operator">:</span> <span class="token punctuation">{</span>
      <span class="token literal-property property">defaultProps</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token literal-property property">variant</span><span class="token operator">:</span> <span class="token string">'outlined'</span><span class="token punctuation">,</span>
        <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'neutral'</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// This is the same as:</span>
<span class="token comment">// &lt;IconButton variant="outlined" color="neutral"></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">IconButton</span></span><span class="token punctuation">></span></span><span class="token operator">...</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">IconButton</span></span><span class="token punctuation">></span></span><span class="token punctuation">;</span>

Theme style overrides

Change styles based on props

To change the styles of a given prop, use a callback as value to the style overrides. The argument contains theme and ownerState (props).

<span class="token function">extendTheme</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">JoyChip</span><span class="token operator">:</span> <span class="token punctuation">{</span>
      <span class="token literal-property property">styleOverrides</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token comment">// `ownerState` contains the component props and internal state</span>
        <span class="token function-variable function">root</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> ownerState<span class="token punctuation">,</span> theme <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span>
          <span class="token operator">...</span><span class="token punctuation">(</span>ownerState<span class="token punctuation">.</span>size <span class="token operator">===</span> <span class="token string">'sm'</span> <span class="token operator">&amp;&amp;</span> <span class="token punctuation">{</span>
            <span class="token literal-property property">borderRadius</span><span class="token operator">:</span> theme<span class="token punctuation">.</span>vars<span class="token punctuation">.</span>radius<span class="token punctuation">.</span>xs<span class="token punctuation">,</span>
          <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

We recommend to use CSS variables from theme.vars.* because it has a better debugging experience and also is more performant in some cases.

The styles can also contain any CSS selectors (support nested selectors), as such:

<span class="token function">extendTheme</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">JoyChip</span><span class="token operator">:</span> <span class="token punctuation">{</span>
      <span class="token literal-property property">styleOverrides</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token function-variable function">root</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> ownerState<span class="token punctuation">,</span> theme <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span>
          <span class="token operator">...</span><span class="token punctuation">(</span>ownerState<span class="token punctuation">.</span>variant <span class="token operator">===</span> <span class="token string">'solid'</span> <span class="token operator">&amp;&amp;</span>
            ownerState<span class="token punctuation">.</span>clickable <span class="token operator">&amp;&amp;</span> <span class="token punctuation">{</span>
              <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'rgba(255 255 255 / 0.72)'</span><span class="token punctuation">,</span>
              <span class="token string-property property">'&amp;:hover'</span><span class="token operator">:</span> <span class="token punctuation">{</span>
                <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'#fff'</span><span class="token punctuation">,</span>
              <span class="token punctuation">}</span><span class="token punctuation">,</span>
              <span class="token string-property property">'&amp;.Mui-disabled'</span><span class="token operator">:</span> <span class="token punctuation">{</span>
                <span class="token literal-property property">opacity</span><span class="token operator">:</span> <span class="token number">0.6</span><span class="token punctuation">,</span>
              <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

Extend colors

The following code snippet illustrates how to provide additional colors to a component beyond primary, success, info, danger, neutral, and warning.

Note that by creating new colors, you're automatically opting out of the global variant feature, which gives you fine-grained control over CSS properties like color, background, and border.

The example below extends the Button colors to include secondary value:

<span class="token function">extendTheme</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">JoyButton</span><span class="token operator">:</span> <span class="token punctuation">{</span>
      <span class="token literal-property property">styleOverrides</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token function-variable function">root</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> ownerState<span class="token punctuation">,</span> theme <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span>
          <span class="token operator">...</span><span class="token punctuation">(</span>ownerState<span class="token punctuation">.</span>color <span class="token operator">===</span> <span class="token string">'secondary'</span> <span class="token operator">&amp;&amp;</span> <span class="token punctuation">{</span>
            <span class="token literal-property property">color</span><span class="token operator">:</span> theme<span class="token punctuation">.</span>vars<span class="token punctuation">.</span>palette<span class="token punctuation">.</span>text<span class="token punctuation">.</span>secondary<span class="token punctuation">,</span>
            <span class="token literal-property property">backgroundColor</span><span class="token operator">:</span> theme<span class="token punctuation">.</span>vars<span class="token punctuation">.</span>palette<span class="token punctuation">.</span>background<span class="token punctuation">.</span>level1<span class="token punctuation">,</span>
          <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

Once these values are defined as above, you can make use of them directly on instances of the Button component:

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Button</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>secondary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Secondary color<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Button</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tertiary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Tertiary color<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span>

TypeScript

Module augmentation is required to pass the values to the color prop of the component.

The interface format is {ComponentName}PropsColorOverrides, which is the same for all Joy UI components:

<span class="token comment">// This part could be declared in your theme file</span>
declare module <span class="token string">'@mui/joy/Button'</span> <span class="token punctuation">{</span>
  <span class="token keyword">interface</span> <span class="token class-name">ButtonPropsColorOverrides</span> <span class="token punctuation">{</span>
    secondary<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
    tertiary<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token comment">// typed-safe</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Button</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>secondary<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Button</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tertiary<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>

Extend sizes

The following code snippet illustrates how to provide additional sizes to a component beyond sm, md, and lg. We recommend following the established "t-shirt size" naming convention (e.g. xs, xl, xxl, etc.) to maintain consistency with all the other props.

The example below extends the Button sizes to include xs and xl values:

<span class="token function">extendTheme</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">JoyButton</span><span class="token operator">:</span> <span class="token punctuation">{</span>
      <span class="token literal-property property">styleOverrides</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token function-variable function">root</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> ownerState<span class="token punctuation">,</span> theme <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span>
          <span class="token operator">...</span><span class="token punctuation">(</span>ownerState<span class="token punctuation">.</span>size <span class="token operator">===</span> <span class="token string">'xs'</span> <span class="token operator">&amp;&amp;</span> <span class="token punctuation">{</span>
            <span class="token string-property property">'--Icon-fontSize'</span><span class="token operator">:</span> <span class="token string">'1rem'</span><span class="token punctuation">,</span>
            <span class="token string-property property">'--Button-gap'</span><span class="token operator">:</span> <span class="token string">'0.25rem'</span><span class="token punctuation">,</span>
            <span class="token literal-property property">minHeight</span><span class="token operator">:</span> <span class="token string">'var(--Button-minHeight, 1.75rem)'</span><span class="token punctuation">,</span>
            <span class="token literal-property property">fontSize</span><span class="token operator">:</span> theme<span class="token punctuation">.</span>vars<span class="token punctuation">.</span>fontSize<span class="token punctuation">.</span>xs<span class="token punctuation">,</span>
            <span class="token literal-property property">paddingBlock</span><span class="token operator">:</span> <span class="token string">'2px'</span><span class="token punctuation">,</span>
            <span class="token literal-property property">paddingInline</span><span class="token operator">:</span> <span class="token string">'0.5rem'</span><span class="token punctuation">,</span>
          <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
          <span class="token operator">...</span><span class="token punctuation">(</span>ownerState<span class="token punctuation">.</span>size <span class="token operator">===</span> <span class="token string">'xl'</span> <span class="token operator">&amp;&amp;</span> <span class="token punctuation">{</span>
            <span class="token string-property property">'--Icon-fontSize'</span><span class="token operator">:</span> <span class="token string">'2rem'</span><span class="token punctuation">,</span>
            <span class="token string-property property">'--Button-gap'</span><span class="token operator">:</span> <span class="token string">'1rem'</span><span class="token punctuation">,</span>
            <span class="token literal-property property">minHeight</span><span class="token operator">:</span> <span class="token string">'var(--Button-minHeight, 4rem)'</span><span class="token punctuation">,</span>
            <span class="token literal-property property">fontSize</span><span class="token operator">:</span> theme<span class="token punctuation">.</span>vars<span class="token punctuation">.</span>fontSize<span class="token punctuation">.</span>xl<span class="token punctuation">,</span>
            <span class="token literal-property property">paddingBlock</span><span class="token operator">:</span> <span class="token string">'0.5rem'</span><span class="token punctuation">,</span>
            <span class="token literal-property property">paddingInline</span><span class="token operator">:</span> <span class="token string">'2rem'</span><span class="token punctuation">,</span>
          <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

Once these values are defined as above, you can make use of them directly on instances of the Button component:

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Button</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>xs<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Extra small<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Button</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>xl<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Extra large<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span>

The properties used for extending sizes should only relate to the density or the dimensions of the component. To learn how to extend variant properties, check out the Extend variants section in this document.

TypeScript

Module augmentation is required to pass the values to the size prop of the component.

The interface format is {ComponentName}PropsSizeOverrides, which is the same for all Joy UI components:

<span class="token comment">// This part could be declared in your theme file</span>
declare module <span class="token string">'@mui/joy/Button'</span> <span class="token punctuation">{</span>
  <span class="token keyword">interface</span> <span class="token class-name">ButtonPropsSizeOverrides</span> <span class="token punctuation">{</span>
    xs<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
    xl<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token comment">// typed-safe</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Button</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>xs<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Button</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>xl<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>

Extend variants

The following code snippet shows how to extend component variants for color properties. Note that by creating new variants, you're automatically opting out of the global variant feature, which gives you fine-grained control over CSS properties like color, background, and border.

This example extends the Sheet variant to include a custom value named glass:

<span class="token function">extendTheme</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">JoySheet</span><span class="token operator">:</span> <span class="token punctuation">{</span>
      <span class="token literal-property property">styleOverrides</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token function-variable function">root</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> ownerState<span class="token punctuation">,</span> theme <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span>
          <span class="token operator">...</span><span class="token punctuation">(</span>ownerState<span class="token punctuation">.</span>variant <span class="token operator">===</span> <span class="token string">'glass'</span> <span class="token operator">&amp;&amp;</span> <span class="token punctuation">{</span>
            <span class="token literal-property property">color</span><span class="token operator">:</span> theme<span class="token punctuation">.</span>vars<span class="token punctuation">.</span>palette<span class="token punctuation">.</span>text<span class="token punctuation">.</span>primary<span class="token punctuation">,</span>
            <span class="token literal-property property">background</span><span class="token operator">:</span> <span class="token string">'rgba(255, 255, 255, 0.14)'</span><span class="token punctuation">,</span>
            <span class="token literal-property property">backdropFilter</span><span class="token operator">:</span> <span class="token string">'blur(5px)'</span><span class="token punctuation">,</span>
            <span class="token literal-property property">border</span><span class="token operator">:</span> <span class="token string">'1px solid rgba(255, 255, 255, 0.3)'</span><span class="token punctuation">,</span>
            <span class="token literal-property property">boxShadow</span><span class="token operator">:</span> <span class="token string">'0 4px 30px rgba(0, 0, 0, 0.1)'</span><span class="token punctuation">,</span>
          <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

Once the value is defined as above, you can make use of it directly on instances of the Sheet component:

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Sheet</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>glass<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Glassmorphism<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Sheet</span></span><span class="token punctuation">></span></span>

TypeScript

Module augmentation is required to pass the values to the variant prop of the component.

The interface format is {ComponentName}PropsSizeOverrides, which is the same for all Joy UI components:

<span class="token comment">// This part could be declared in your theme file</span>
declare module <span class="token string">'@mui/joy/Sheet'</span> <span class="token punctuation">{</span>
  <span class="token keyword">interface</span> <span class="token class-name">SheetPropsVariantOverrides</span> <span class="token punctuation">{</span>
    glass<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token comment">// typed-safe</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Sheet</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>glass<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>

Different styles per mode

To specify different values than the ones defined in the default theme for each mode (light and dark), use the CSS attribute selector.

Joy UI attaches a data-* attribute with the current color scheme to the DOM (HTML by default). You can use the theme.getColorSchemeSelector utility to change the component styles.

The example below illustrate how you'd change the intensity of the boxShadow token in the light mode while removing it completely in the dark mode:

<span class="token function">extendTheme</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">JoyChip</span><span class="token operator">:</span> <span class="token punctuation">{</span>
      <span class="token literal-property property">styleOverrides</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token function-variable function">root</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> ownerState<span class="token punctuation">,</span> theme <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span>
          <span class="token comment">// for the default color scheme (light)</span>
          <span class="token literal-property property">boxShadow</span><span class="token operator">:</span> theme<span class="token punctuation">.</span>vars<span class="token punctuation">.</span>shadow<span class="token punctuation">.</span>sm<span class="token punctuation">,</span>

          <span class="token comment">// the result is `[data-joy-color-scheme="dark"] &amp;`</span>
          <span class="token punctuation">[</span>theme<span class="token punctuation">.</span><span class="token function">getColorSchemeSelector</span><span class="token punctuation">(</span><span class="token string">'dark'</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token operator">:</span> <span class="token punctuation">{</span>
            <span class="token literal-property property">boxShadow</span><span class="token operator">:</span> <span class="token string">'none'</span><span class="token punctuation">,</span>
          <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

If you have custom color schemes defined, this approach also works. However, note that it creates additional CSS specificity which might be cumbersome when the parent component wants to override their children styles.