Customize component styles

Customizing base component styles

In the Experience Builder theme module, you can customize base component styles by creating and exporting style objects in path to theme/style.ts.

Base components refer to those that can be directly imported from jimu-ui. You can see all base components here.

1
2
3
4
5
6
7
8
9
10
// style.ts
import type { ThemeComponentStyleOptions } from 'jimu-theme'

export const Button: ThemeComponentStyleOptions['Button'] = {
  root: ({ theme }) => {
    return {
      // Your custom styles here
    }
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// style.ts
import type { ThemeComponentStyleOptions } from 'jimu-theme'

export const Button: ThemeComponentStyleOptions['Button'] = {
  root: ({ styleState, theme }) => {
    const styles = (styleState.variant === 'contained' && styleState.color === 'primary') ? {
      backgroundColor: theme.sys.color.secondary.main,
      color: theme.sys.color.secondary.text,
      '&:hover': {
        backgroundColor: theme.sys.color.secondary.dark,
        color: theme.sys.color.secondary.text
      }
    } : {}

    return styleState.tag === 'a' ? { '&[role="button"]': styles } : styles
  }
}

Global styles

To apply global styles across the entire app, use the special CssBaseline component:

1
2
3
4
5
6
7
8
9
10
// style.ts
import type { ThemeComponentStyleOptions } from 'jimu-theme'

export const CssBaseline: ThemeComponentStyleOptions['CssBaseline'] = {
  root: () => ({
    html: {
      fontSize: '80%'
    }
  })
}

Additionally, CssBaseline’s styleState includes a rootUrl property that represents the app’s root URL. This allows you to load fonts or assets using absolute paths:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// style.ts
export const CssBaseline = {
  root: ({ styleState }) => {
    const rootUrl = styleState.rootUrl || ''
    return `
      @font-face {
        font-family: 'Family name';
        src: url('${rootUrl}themes/<theme name>/assets/<font file>') format('truetype');
        font-weight: 400;
        font-style: normal;
      }
    `
  }
}

Limitations on further customization

Typically, a custom theme can still be edited through the Experience Builder Theme Settings panel. However, once component styles are overridden via style.ts (or style.scss), the corresponding components will no longer respond to Theme Settings adjustments.

If you are certain that your custom styles do not conflict with Theme Settings, you can explicitly allow theme editing by setting themeCustomizable to true in the manifest file:

1
"themeCustomizable": true

This will enable Theme Settings modifications even for themes with advanced custom styles.