在MUI-5中创建自定义组件变体时，如何为自定义变体选择基本变体？

Question

我希望我的自定义Divider变体就像内置的'middle'一样，但又厚又短。似乎默认的'fullWidth'变体被用作基变量，文档中没有答案，如何使用另一个变体作为基。

const theme = createTheme({
  components: {
    MuiDivider: {
      variants: [
        {
          props: { variant: 'thick-short' },
          style: {
            //This style got merged with 'fullWidth' one
            //but I would like to have 'middle'
            borderBottomWidth: '16px',
            width: '20%',
          },
        },
      ],
    },
  },
})

Answer 1

可以在主题中使用defaultProps设置道具的默认值：

MuiDivider: {
    defaultProps: {
         variant: 'thick-short'
    },
    // ...
}

见文档