Блог

Главная - Вопросы по программированию - Пользовательский интерфейс материала: Как я могу изменить цвет границы выбранного компонента?

Пользовательский интерфейс материала: Как я могу изменить цвет границы выбранного компонента?

#css #reactjs #material-ui

Вопрос:

Я пытаюсь настроить компонент Select из пользовательского интерфейса Material.

Вот как это выглядит:

введите описание изображения здесь

Однако, когда компонент select сфокусирован, я хочу изменить цвет границы с синего пользовательского интерфейса material на пользовательский красный цвет.

Я попытался настроить стили, но это вообще ничего не дает

 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;

Ответ №1:

Попробуйте это:

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

Комментарии:

1. Я отредактировал ответ, потому что изначально я использовал a TextField вместо a Select . Для работы с a Select вложенный селектор не должен содержать пробелов между amp; и .Mui-focused .

2.Видеть github.com/roninbar/2021-05-26-react-styles/blob/master/src/….

Ответ №2:

Если кого-то интересует последняя версия 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',
    },
    'amp;: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;
}
Метки: