改变材质ui组件的自定义颜色以调整暗模式

Question

嗨，我有一个定制的芯片组件的材料ui应用程序，我正在改变使用灰色对象的芯片的背景和边界颜色

现在，当我通过全局主题切换到黑暗模式面板:{类型:"dark"}这些颜色不会变。是否有一些方法来改变这些自定义颜色的基础上，如果我们在浅色或深色模式?

import React, { useState } from 'react';
import grey from'@material-ui/core/colors/grey';
import {Chip} from "@material-ui/core";
import {withStyles} from "@material-ui/core/styles";

const MyChip = withStyles(theme =>({
root: {
backgroundColor:grey[100],
borderStyle: "solid",
borderWidth: "1px",
borderColor: grey[300]
},
}))(Chip);
const ChipComponent = ({...props}) => {
return <MyChip {...props} />
}
export default ChipComponent;

Answer 1

根据@BenStephens的解(见原问题评论)解决方法是添加theme.palette.type === 'dark' ?灰色[800]:灰色[100]到背景/边框颜色

import React, { useState } from 'react';
import {Chip} from "@material-ui/core";
import { createMuiTheme } from '@material-ui/core/styles';
import {withStyles} from "@material-ui/core/styles";
import { useTheme } from '@material-ui/core/styles';
import grey from'@material-ui/core/colors/grey';
const MyChip = withStyles(theme =>({
root: {
backgroundColor:theme.palette.type=='dark'? grey["700"]:grey["100"],
borderStyle: "solid",
borderWidth: "1px",
borderColor: theme.palette.grey[300]
},
}))(Chip);

const ChipComponent = ({...props}) => {
return <MyChip {...props} />
}
export default ChipComponent;