reactjs - 如何让Material-UI V5自动生成:hover colors in custom color objects for buttons

Question

我正在使用 MUI v5(最新)指定自定义颜色以在我的主题提供程序中使用。但是，我注意到悬停状态颜色没有变化。是否需要将特定值添加到 main 以使其自动生成色调/颜色？根据我的内存，它会自动生成自定义颜色的悬停状态。我需要做什么？

我的主题文件:

import { createTheme, responsiveFontSizes } from "@material-ui/core"

let theme = createTheme({
  typography: {
    palette: {
      sand: {
        main: '#f3d3bd'
      }
    },
    thin: {
      fontFamily: 'Helvetica',
      fontWeight: 100,
      fontStyle: 'sans-serif',
    },
    fontFamily: [
      'Roboto',
      '-apple-system',
      'BlinkMacSystemFont',
      '"Segoe UI"',
      '"Helvetica Neue"',
      'Arial',
      'sans-serif',
      '"Apple Color Emoji"',
      '"Segoe UI Emoji"',
      '"Segoe UI Symbol"',
    ].join(','),
    
  },
  palette: {
    primary: {
      main: '#0277bd',
    },
    secondary: {
      main: '#b2ff59',
    },
    darkGray: {
      main: '#333333'
    },
    lightGray: {
      main: '#5e5e5e'
    },
    amber: {
      main: '#f96225',
    },
    turquoise: {
      main: '#48e5c2'
    },
    sand: {
      main: '#f3d3bd'
    },
    offWhite: {
      main: '#fcfaf9'
    }
  },
})

theme = responsiveFontSizes(theme)
export default theme

Answer 1

Material-UI 不会自动增加您添加到调色板的自定义颜色的明暗变化，但它会 augment the standard colors .这些明暗变化用于一些悬停效果，例如 contained Button .

您可以使用 theme.palette 中的 augmentColor 函数将生成的明暗变化版本添加到您的颜色中(或明确指定它们):

import { ThemeProvider, createTheme } from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";

const defaultTheme = createTheme();
const theme = createTheme({
  palette: {
    green: defaultTheme.palette.augmentColor({
      color: { main: "#00ff00" },
      name: "green"
    })
  }
});

export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <Button variant="contained" color="green">
        Hello
      </Button>
    </ThemeProvider>
  );
}

相关回答:Merge Material UI themes