css 物料界面：如何更改选择组件的边框颜色？

gwo2fgha 于 2023-03-20 发布在其他

关注(0)|答案(3)|浏览(150)

我正在尝试自定义“从材质UI选择”组件。
它看起来是这样的：

然而，当选择组件成为焦点时，我想将边框颜色从材质UI的蓝色更改为自定义的红色。
我试着设置样式，但它没有任何作用

import FormControl from '@material-ui/core/FormControl';
import InputLabel from '@material-ui/core/InputLabel';
import MuiSelect from '@material-ui/core/Select';
import MenuItem from '@material-ui/core/MenuItem';
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles((theme) => ({
  formControl: {
    margin: theme.spacing(1),
    minWidth: 120,
  },
  select: {
    borderColor: '#FF0000',      //<------------ this does nothing
  },
}));

const Select = () => {
  const classes = useStyles();
  return (
    <FormControl variant="outlined" className={classes.formControl}>
      <InputLabel>Months</InputLabel>
      <MuiSelect label="Months" className={classes.select}>
        <MenuItem value="1">January</MenuItem>
        <MenuItem value="2">February</MenuItem>
        <MenuItem value="3">March</MenuItem>
        <MenuItem value="4">April</MenuItem>
      </MuiSelect>
    </FormControl>
  );
};

Select.propTypes = {};

export default Select;

css

来源：https://stackoverflow.com/questions/67710051/material-ui-how-can-i-change-the-border-color-of-the-select-component

3条答案

按热度按时间

oewdyzsn1#

试试这个：

const useStyles = makeStyles((theme) => ({
  formControl: {
    margin: theme.spacing(1),
    minWidth: 120,
  },
  select: {
    '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
        borderColor: 'red',
    },
  },
}));

赞(0）回复(0）举报 2023-03-20

yacmzcpb2#

如果有人对最新版本的MUI 5感兴趣。

import {
  Select,
} from '@mui/material';
import { SxProps } from '@mui/material/styles';
import classes from './component.module.css';

const styles: SxProps = {
  select: {
    '.MuiOutlinedInput-notchedOutline': {
      borderColor: '#color',
    },
    '&:hover .MuiOutlinedInput-notchedOutline': {
      borderColor: '#color',
      borderWidth: '0.15rem',
    },
  },
};

<Select
     variant="outlined"
     sx={styles.select}
     inputProps={{
       classes: {
         icon: classes.icon,
           },
       }}
  >

对于图标，可以创建单独的文件component.module.css

.icon {
    fill: #color;
}

赞(0）回复(0）举报 2023-03-20

ttygqcqt3#

您也可以使用

const selectFieldStyles = {
".MuiOutlinedInput-notchedOutline": {
      borderColor: "#E34824",
    },
        "&:hover .MuiOutlinedInput-notchedOutline": {
            borderColor: "#E34824",
            borderWidth: "thin",
        },
        "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
            borderColor: "#E34824",
            borderWidth: "thin",
        },
    };

然后在选择组件中

<Select sx={selectFieldStyles}>...</Select>

赞(0）回复(0）举报 2023-03-20

我来回答

css 物料界面：如何更改选择组件的边框颜色？

3条答案

相关问题

热门标签

最新问答