Mui v5无法应用自定义主题中定义的颜色

Question

我在mui v5中做了一个小的自定义主题，它低于

import React from "react";
import { createTheme, Theme } from "@mui/material/styles";
import { brown, red } from "@mui/material/colors";
export const theme = createTheme({
palette: {
primary: {
main: "#000000",
magic: "#000000",
},
brown: {
main: brown[300],
},
promoColor: {
main:red[800]
},
},
myField: {
myNestedField: { margin: "10px 5px" },
},
});

然后将其传递到我的根文件中的上下文中

ReactDOM.render(
<React.StrictMode>
<Provider store={store}>
<ThemeProvider theme={theme}>
<PersistGate persistor={persistor}>
<ApolloProvider client={client}>
<App />
</ApolloProvider>
</PersistGate>
</ThemeProvider>
</Provider>
</React.StrictMode>,
document.getElementById("root")
);

但问题是，当我试图在这样的按钮中使用primary.magic的主题颜色时

<Button type="submit" variant="contained" color={theme.palette.primary.magic}>
Submit
</Button>

我得到一个错误，上面写着

未捕获类型错误：主题调色板〔ownerState.color〕未定义

当我像一样做的时候

<Button type="submit" variant="contained" color="primary">
Submit
</Button>

它运行良好，但我想添加"；魔术；我的按钮中的颜色

Answer 1

尝试使用sx属性：

<Button
type='submit'
variant='contained'
sx={{ backgroundColor: 'primary.magic' }}
>
Submit
</Button>;