如何在MUI主题中为按钮聚焦轮廓引用主色？

问题描述 #

需要为按钮添加聚焦状态的轮廓，且轮廓颜色使用主题主色，但不清楚如何在主题配置中引用主色。现有主题配置代码如下：

export const BaseTheme = createTheme({
  components: {
    styleOverrides: {
      root: {
        ‘&:focus’: {
          outline: ‘2px solid primaryColorHere’
        }
      }
    }
  }
});

解决方案 #

在MUI的主题配置中，可将styleOverrides内的样式值设为函数，以此获取theme变量，进而引用主题中的主色。修改后的配置代码如下：

export const BaseTheme = createTheme({
  components: {
    styleOverrides: {
      root: ({ theme }) => ({
        ‘&:focus’: {
          outline: `2px solid ${theme.palette.primary.main}`
        }
      }),
    }
  }
});

内容的提问来源于stack exchange，提问作者jrock2004