Components 组件

The theme's `components` key allows you to customize a component without wrapping it in another component. You can change the styles, the default props, and more. 你可以更改样式、默认属性等等其他东西。

重写全局样式

可以使用theme的 styleOverrides 属性来改变每一个在 DOM 中由 Material-UI 生成的样式。

const theme = createTheme({
  components: {
    // Name of the component
    MuiButton: {
      styleOverrides: {
        // Name of the slot
        root: {
          // Some CSS
          fontSize: '1rem',
        },
      },
    },
  },
});

<ThemeProvider theme={theme}>
  <Button>font-size: 1rem</Button>
</ThemeProvider>

在组件API 页面的 CSS介绍部分，列出了每个组件样式类的文档。

要用 TypeScript 重写lab组件的样式，请查看此文档。

默认属性

You can change the default of every prop of a Material-UI component. A defaultProps key is exposed in the theme's components key for this use case. 下面示例就是指定defaultProps属性覆盖components下组件的默认属性。

const theme = createTheme({
  components: {
    // Name of the component
    MuiButtonBase: {
      defaultProps: {
        // The props to change the default for.
        disableRipple: true, // No more ripple!
      },
    },
  },
});
        disableRipple: true, // No more ripple!
      },
    },
  },
});

<ThemeProvider theme={theme}>
  <Button>Change default props</Button>
</ThemeProvider>

要使用 TypeScript 覆盖实验室组件样式，请检查此文档

添加新的组件变量

You can use the variants key in the theme's components section to add new variants to Material-UI components. These new variants can specify what styles the component should have when specific props are applied. 这些变量能够决定当使用特定的属性时组件应该采用什么样的样式。

在组件名称（如：MuiButton）下以数组形式定义组件变量。数组中的每个变量都会对应一个CSS类添加到HTML<head>中。 For each of them a CSS class is added to the HTML <head>. The order is important, so make sure that the styles that should win are specified last.

const theme = createTheme({
  components: {
    MuiButton: {
      variants: [
        {
          props: { variant: 'dashed' },
          style: {
            textTransform: 'none',
            border: `2px dashed grey${blue[500]}`,
          },
        },
        {
          props: { variant: 'dashed', color: 'secondary' },
          style: {
            border: `4px dashed ${red[500]}`,
          },
        },
      ],
    },
  },
});

如果你用的是TypeScript，那么需要使用moduleaugmentation定义新的variants/colors

declare module '@material-ui/core/Button/Button' {
  interface ButtonPropsVariantOverrides {
    dashed: true;
  }
}

<ThemeProvider theme={theme}>
  <Button variant="dashed" sx={{ m: 1 }}>
    Dashed
  </Button>
  <Button variant="dashed" color="secondary" sx={{ m: 1 }}>
    Secondary
  </Button>
  <Button variant="dashed" size="large" sx={{ m: 1 }}>
    Large
  </Button>
  <Button variant="dashed" color="secondary" size="large" sx={{ m: 1 }}>
    Secondary large
  </Button>
</ThemeProvider>

主题变量

覆盖所有组件实例的另一种方式是调整 theme configuration variables。

const theme = createTheme({
  typography: {
    button: {
      fontSize: '1rem',
    },
  },
});

<ThemeProvider theme={theme}>
  <Button>font-size: 1rem</Button>
</ThemeProvider>