如何在主题调色板中设置MUI组件的默认颜色

Question

我想知道是否有人知道是否有可能为Checkbox, TextField等MUI组件设置默认颜色。现在，他们自动使用原色，但我想设置复选框为次要和TextField为第三(自定义颜色)。所以我的问题是:是否可以在主题调色板中为这些组件设置默认颜色?

我尝试使用不同的颜色，但总是以使用原色的组件结束。我希望我能以某种方式覆盖这个颜色，并为整个组件设置自己的颜色，如复选框等。

Answer 1

你绝对可以做到!MUI提供了许多不同的方式来定制它们的组件，这一点非常棒。

对于您的Checkbox组件，您有几个选项。您可以使用MUI的color道具，它从调色板中获取关键字，即primary,secondary,danger。可用的颜色可以在这里找到

<Checkbox {...label} defaultChecked color="secondary" />

或者你可以传入它们的sx道具，这与使用style道具传递内联CSS是一样的。

<Checkbox
checked={checked}
onChange={handleChange}
sx={{
color: "red",
'&.Mui-checked': {
color: "red",
},
}}
inputProps={{ 'aria-label': 'controlled' }}
/>

在sx道具中，你只需要确定你想要瞄准的类。

第三个选项是创建自己的自定义主题，信息可以在这里找到。有了这个，你也可以定制你正在使用的组件，但是你只需要弄清楚你想要定制的类或组件。但你可以创建各种不同的主题选项，然后你可以在整个应用程序中访问。

//create your theme here, 
import { createTheme } from '@mui/material/styles';
const theme = createTheme({
palette: {
primary: {
light: '#757ce8',
main: '#3f50b5',
dark: '#002884',
contrastText: '#fff',
},
secondary: {
light: '#ff7961',
main: '#f44336',
dark: '#ba000d',
contrastText: '#000',
},
},
});
// wrap the component you're wanting to access the them, can be a specific component
// or your whole app
<ThemeProvider theme={theme}>
<CustomCheckbox defaultChecked />
</ThemeProvider>
//customize components so when you use them they default to your settings
const theme = createTheme({
components: {
// Name of the component
MuiButtonBase: {
defaultProps: {
// The props to change the default for.
disableRipple: true, // No more ripple, on the whole application 💣!
},
},
},
});

希望这对你有帮助!