当涉及到着色元素时,我在 Material-UI 中遇到了一些困难。一些元素会自动选择“theme.palette.main.dark”。我想知道如何强制他们不要这样做。
例如,TextField 和 SpeedDial 组件会自动从主题中选择 dark 属性。我试图只删除 dark 属性,但 TextField 是黑色的,并且 TextField 中的文本不可读。
我的主题文件配置如下:
import {createMuiTheme} from "@material-ui/core";
import {green, indigo, red} from "@material-ui/core/colors";
const theme = createMuiTheme({
palette: {
primary: {
main: indigo.A200,
dark: green.A100
},
white: {
text: '#fff',
},
secondary: {
main: red.A100,
dark: green.A100,
}
}
});
export default theme;
我希望 TextField 和 SpeedDial 选择原色,但实际结果是他们选择了深色属性,可能是因为它会干扰人们无法正确看到组件,但我想自定义选择颜色。我一直无法找到有关如何更改 TextField 组件中下划线和浮点颜色的说明。
最佳答案
下面是一个例子,在 TextField 的不同方面有许多令人讨厌的颜色。
import React from "react";
import ReactDOM from "react-dom";
import TextField from "@material-ui/core/TextField";
import { makeStyles } from "@material-ui/core/styles";
const useStyles = makeStyles({
root: {
color: "white",
backgroundColor: "fuchsia",
"&.Mui-focused": {
color: "orange",
backgroundColor: "pink"
},
"&:before": {
borderBottomColor: "blue"
},
"&:hover:not(.Mui-focused):before": {
borderBottomColor: "green"
},
"&:after": {
// focused
borderBottomColor: "purple"
}
},
input: {
"&::selection": {
backgroundColor: "lightgreen",
color: "black"
}
}
});
const useLabelStyles = makeStyles({
root: {
color: "brown",
"&.Mui-focused": {
color: "aqua"
}
}
});
function App() {
const classes = useStyles();
const labelClasses = useLabelStyles();
return (
<div className="App">
<TextField
InputProps={{ classes: classes }}
InputLabelProps={{ classes: labelClasses }}
label="label"
defaultValue="text"
/>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
这是相同的外观,但通过主题控制:
import React from "react";
import ReactDOM from "react-dom";
import TextField from "@material-ui/core/TextField";
import { createMuiTheme, ThemeProvider } from "@material-ui/core/styles";
const theme = createMuiTheme({
overrides: {
MuiInput: {
root: {
color: "white",
backgroundColor: "fuchsia",
"&.Mui-focused": {
color: "orange",
backgroundColor: "pink"
},
"&:before": {
borderBottomColor: "blue"
},
"&:hover:not(.Mui-focused):before": {
borderBottomColor: "green"
},
"&:after": {
// focused
borderBottomColor: "purple"
}
},
input: {
"&::selection": {
backgroundColor: "lightgreen",
color: "black"
}
}
},
MuiInputLabel: {
root: {
color: "brown",
"&.Mui-focused": {
color: "aqua"
}
}
}
}
});
function App() {
return (
<ThemeProvider theme={theme}>
<div className="App">
<TextField label="label" defaultValue="text" />
</div>
</ThemeProvider>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
相关回答:
关于javascript - 如何正确设置 Material-ui 中某些元素的颜色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57778393/