下面的示例展示了如何在 v4 中执行此操作(下面是 v5 示例):
import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import OutlinedInput from "@material-ui/core/OutlinedInput";
import InputLabel from "@material-ui/core/InputLabel";
import MenuItem from "@material-ui/core/MenuItem";
import FormControl from "@material-ui/core/FormControl";
import Select from "@material-ui/core/Select";
const useStyles = makeStyles(theme => ({
root: {
display: "flex",
flexWrap: "wrap"
},
formControl: {
margin: theme.spacing(1),
minWidth: 120
},
selectEmpty: {
marginTop: theme.spacing(2)
}
}));
const useOutlinedInputStyles = makeStyles(theme => ({
root: {
"& $notchedOutline": {
borderColor: "red"
},
"&:hover $notchedOutline": {
borderColor: "blue"
},
"&$focused $notchedOutline": {
borderColor: "green"
}
},
focused: {},
notchedOutline: {}
}));
export default function SimpleSelect() {
const classes = useStyles();
const outlinedInputClasses = useOutlinedInputStyles();
const [values, setValues] = React.useState({
age: "",
});
const inputLabel = React.useRef(null);
const [labelWidth, setLabelWidth] = React.useState(0);
React.useEffect(() => {
setLabelWidth(inputLabel.current.offsetWidth);
}, []);
function handleChange(event) {
setValues(oldValues => ({
...oldValues,
[event.target.name]: event.target.value
}));
}
return (
<form className={classes.root} autoComplete="off">
<FormControl variant="outlined" className={classes.formControl}>
<InputLabel ref={inputLabel} htmlFor="outlined-age-simple">
Age
</InputLabel>
<Select
value={values.age}
onChange={handleChange}
input={
<OutlinedInput
labelWidth={labelWidth}
name="age"
id="outlined-age-simple"
classes={outlinedInputClasses}
/>
}
>
<MenuItem value="">
<em>None</em>
</MenuItem>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>
</form>
);
}
您可以在我的相关回答中了解更多相关内容:
- 使用 React Material-ui 更改 OutlinedInput 的大纲 https://stackoverflow.com/questions/54325908/change-outline-for-outlinedinput-with-react-material-ui/54331012#54331012
- 全局概述覆盖 https://stackoverflow.com/questions/54789989/global-outlined-override/54794340#54794340
- 更改 Material-UI TextField 上的边框颜色 https://stackoverflow.com/questions/58963242/change-border-color-on-material-ui-textfield/58963947#58963947
这是一个类似的示例,但对于 Material-UI v5 使用styled
:
import React from "react";
import { styled } from "@material-ui/core/styles";
import { outlinedInputClasses } from "@material-ui/core/OutlinedInput";
import InputLabel from "@material-ui/core/InputLabel";
import MenuItem from "@material-ui/core/MenuItem";
import FormControl from "@material-ui/core/FormControl";
import Select from "@material-ui/core/Select";
const StyledForm = styled("form")(`
display: flex;
flex-wrap: wrap;
`);
const StyledFormControl = styled(FormControl)(({ theme }) => ({
margin: theme.spacing(1),
minWidth: 120
}));
const StyledSelect = styled(Select)(`
& .${outlinedInputClasses.notchedOutline} {
border-color: red;
}
&:hover .${outlinedInputClasses.notchedOutline} {
border-color: blue;
}
&.${outlinedInputClasses.focused} .${outlinedInputClasses.notchedOutline} {
border-color: lime;
}
`);
export default function SimpleSelect() {
const [values, setValues] = React.useState({
age: ""
});
function handleChange(event) {
setValues((oldValues) => ({
...oldValues,
[event.target.name]: event.target.value
}));
}
return (
<StyledForm autoComplete="off">
<StyledFormControl variant="outlined">
<InputLabel id="outlined-age-simple-label">Age</InputLabel>
<StyledSelect
labelId="outlined-age-simple-label"
value={values.age}
onChange={handleChange}
name="age"
label="Age"
>
<MenuItem value="">
<em>None</em>
</MenuItem>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</StyledSelect>
</StyledFormControl>
</StyledForm>
);
}