Пользовательский интерфейс материала меняет цвет для поля выбора

#reactjs #material-ui

Вопрос:

Это мой код,

 import { AppBar, createStyles, MenuItem, Select, Toolbar, Typography } from '@mui/material';
import { makeStyles } from '@mui/styles';
import { useState } from 'react';

const useStyles = makeStyles((theme) =>
    createStyles({
        selectRoot: {
            color: "white",
        }
    }),
);

const Navbar = () => {

    const classes = useStyles();
    const [sort, setSort] = useState(1);

    return (
        <AppBar position="static">
            <Toolbar>
                <Typography variant="h6" sx={{ flexGrow: 1}}>Tools</Typography>
                <Select
                    variant="standard"
                    value={sort}
                    className={classes.selectRoot}
                    onChange={(event) => setSort(event.target.value)}
                >
                    <MenuItem value={1}>Default sort</MenuItem>
                    <MenuItem value={2}>Sort by Title ASC</MenuItem>
                    <MenuItem value={3}>Sort by Title DESC</MenuItem>
                </Select>
            </Toolbar>
        </AppBar>
    )
}

export default Navbar;

Что мне нужно, чтобы изменить цвет тега select. В inspect кажется, что этот класс переопределен этим классом.

 .css-a88p61-MuiInputBase-root-MuiInput-root{
    color: rgba(0, 0, 0, 0.87);
}

1. Цвет фона или цвет границы какой цвет вы хотите изменить

2. @SachinYadav цвет шрифта

3. Цвет шрифта меню ?

4. @SachinYadav Нет для «выбрать».

5. Пожалуйста, поясните, как вы собираетесь установить цвет шрифта select, если в нем нет шрифта, он должен быть для элементов меню или вам нужно изменить цвет фона элементов меню, когда выбран раскрывающийся список select

Ответ №1:

Вам нужно использовать .MuiMenuItem-корень внутри тега select , это раскрасит все ваши элементы меню.

  MenuProps={{
                        sx: {
                          "amp;amp; .MuiMenuItem-root":{
                            backgroundColor: "red",
                            color: "orange"
                          }
                        }
                       
                      }}

Но если вы не хотите применять цвет к определенному элементу меню, вам нужно использовать .MuiMenuItem-gutters класс в компоненте Select и установить disableGutters={true} значение элемента меню, к которому вы не хотите применять цвет

Пример использования .MuiMenuItem-root класса

 import { AppBar, createStyles, MenuItem, Select, Toolbar, Typography } from '@mui/material';
import { makeStyles } from '@mui/styles';
import { useState } from 'react';

const useStyles = makeStyles((theme) =>
    createStyles({
        selectRoot: {
            color: "white",
        },
        menuItem:{
            color: "red",
        }
    }),
);

const Select = () => {

    const classes = useStyles();
    const [sort, setSort] = useState(1);

    return (
        <AppBar position="static">
            <Toolbar>
                <Typography variant="h6" sx={{ flexGrow: 1}}>Tools</Typography>
                <Select
                    variant="standard"
                    value={sort}
                    className={classes.selectRoot}
                    onChange={(event) => setSort(event.target.value)}
                    MenuProps={{
                        sx: {
                          "amp;amp; .MuiMenuItem-root":{
                            backgroundColor: "red",
                            color: "orange"
                          }
                        }
                       
                      }}
                >
                    <MenuItem  value={1}>Default sort</MenuItem>
                    <MenuItem  value={2}>Sort by Title ASC</MenuItem>
                    <MenuItem  value={3}>Sort by Title DESC</MenuItem>
                </Select>
            </Toolbar>
        </AppBar>
    )
}

export default Select;

Пример использования .MuiMenuItem-gutters класса

 import { AppBar, createStyles, MenuItem, Select, Toolbar, Typography } from '@mui/material';
import { makeStyles } from '@mui/styles';
import { useState } from 'react';

const useStyles = makeStyles((theme) =>
    createStyles({
        selectRoot: {
            color: "white",
        },
    }),
);

const Select = () => {

    const classes = useStyles();
    const [sort, setSort] = useState(1);

    return (
        <AppBar position="static">
            <Toolbar>
                <Typography variant="h6" sx={{ flexGrow: 1}}>Tools</Typography>
                <Select
                    variant="standard"
                    value={sort}
                    className={classes.selectRoot}
                    onChange={(event) => setSort(event.target.value)}
                    MenuProps={{
                        sx: {
                            "amp;amp; .MuiMenuItem-gutters": {
                                backgroundColor: "pink",
                                color: "red"
                              },
                        }
                       
                      }}
                >
                    <MenuItem  disableGutters = {true} value={1}>Default sort</MenuItem>
                    <MenuItem  value={2}>Sort by Title ASC</MenuItem>
                    <MenuItem  value={3}>Sort by Title DESC</MenuItem>
                </Select>
            </Toolbar>
        </AppBar>
    )
}

export default Select;

Дополнительные свойства css см. в документации