如何更改材质的UI选择边框和标签 [英] How to change material UI select border and label
问题描述
我正在尝试从Material-UI更改select
组件的边框.
到目前为止,我已经尝试过:
I am trying to change the border of a select
component from Material-UI.
So far I've tried:
const styles = theme => ({
root: {
display: "flex",
flexWrap: "wrap",
backgroundColor: "lightgrey"
},
formControl: {
margin: theme.spacing.unit,
minWidth: 120
},
selectEmpty: {
marginTop: theme.spacing.unit * 2
},
cssLabel: {
color: "pink",
"&$cssFocused": {
color: "pink"
}
},
cssFocused: {
color: "pink"
},
underline: {
"&:after": {
borderBottom: "1px solid pink",
borderTop: "1px solid pink"
}
}
});
我可以自定义TextField
等,但是许多小时后,我仍然无法自定义Select.我还尝试传递一个Input
,但是随后您必须自定义Input
,这甚至更糟.
I can customise TextField
etc., but after many many hours, I still can not customise the Select. I tried to pass also an Input
, but then you have to customise the Input
, which is even worse.
有人可以帮我这个沙盒吗?
Could someone help me with this sandbox?
https://codesandbox.io/s/material-demo-ecj1k
我真的很感激.
推荐答案
下面是覆盖边框(MuiOutlinedInput-notchedOutline
),标签(MuiInputLabel-root
)和所选项目文本(MuiOutlinedInput-input
)颜色的示例默认状态,悬停状态和焦点状态.
Below is an example of overriding the colors of the border (MuiOutlinedInput-notchedOutline
), label (MuiInputLabel-root
), and selected item text (MuiOutlinedInput-input
) for default, hover, and focused states.
import React from "react";
import ReactDOM from "react-dom";
import TextField from "@material-ui/core/TextField";
import MenuItem from "@material-ui/core/MenuItem";
import { makeStyles } from "@material-ui/core/styles";
const useStyles = makeStyles({
root: {
width: 200,
"& .MuiOutlinedInput-input": {
color: "green"
},
"& .MuiInputLabel-root": {
color: "green"
},
"& .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline": {
borderColor: "green"
},
"&:hover .MuiOutlinedInput-input": {
color: "red"
},
"&:hover .MuiInputLabel-root": {
color: "red"
},
"&:hover .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline": {
borderColor: "red"
},
"& .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-input": {
color: "purple"
},
"& .MuiInputLabel-root.Mui-focused": {
color: "purple"
},
"& .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline": {
borderColor: "purple"
}
}
});
function App() {
const [age, setAge] = React.useState("");
const classes = useStyles();
return (
<div className="App">
<TextField
className={classes.root}
value={age}
onChange={e => setAge(e.target.value)}
variant="outlined"
label="My Label"
select
>
<MenuItem value="">
<em>None</em>
</MenuItem>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</TextField>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
相关答案:
- Change border color on Material-UI TextField
- Is there a way to style the border color and text color of <TextField/> in Material-UI without using makeStyles
这篇关于如何更改材质的UI选择边框和标签的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!