Реагировать - Пользовательский интерфейс материала - Невозможно установить все цвета для выбора

Question

Я пытаюсь использовать пользовательский интерфейс материала на веб-сайте, чей фон черный, а цвета - зеленый (2EFF22 и 22BF19).

Я не могу установить все цвета выберите (ie поле со списком), как я хочу.

Вот мой код в приложении. js:

const useStyles = makeStyles(theme => ({
  formControl: {
    margin: theme.spacing(1),
    minWidth: 120,
  },
  selectEmpty: {
    marginTop: theme.spacing(2),
  },
}));

function App() {

  const classes = useStyles();

  return (
    <div className="App" style={{ display: 'flex', flexDirection: 'column', backgroundColor: 'black',alignItems: 'center', }}>
      <ThemeProvider theme={Theme}>
        <FormControl className={classes.formControl}>
          <InputLabel id="demo-simple-select-label">Age</InputLabel>
          <Select
            labelId="demo-simple-select-label"
            id="demo-simple-select"
          >
            <MenuItem value={10}>Ten</MenuItem>
            <MenuItem value={20}>Twenty</MenuItem>
            <MenuItem value={30}>Thirty</MenuItem>
          </Select>
        </FormControl>
        <Button style={{ width: '250px', margin: '40px' }} color="primary" variant="contained" onClick={() => console.log('on clikc')}>
          close
      </Button>
      </ThemeProvider>
    </div>
  );
}

export default App;

Вот моя тема. js:

import { createMuiTheme } from '@material-ui/core/styles';

const Theme = createMuiTheme({
  palette: {
    primary: {
      main: '#2EFF22',
    },
    secondary: { main: '#22BF19' }
    //tertiary 177F11
  },
  overrides: {
    MuiOutlinedInput: {
      root: {
        position: 'relative',
        '& $notchedOutline': {
          borderColor: '#2EFF22',
        },
        '&:hover:not($disabled):not($focused):not($error) $notchedOutline': {
          borderColor: '#2EFF22',
          // Reset on touch devices, it doesn't add specificity
          '@media (hover: none)': {
            borderColor: '#2EFF22',
          },
        },
        '&$focused $notchedOutline': {
          borderColor: '#2EFF22',
          borderWidth: 1,
        },
      },
    },
    MuiFormLabel: {
      root: {
        //'&$focused': {
          color: '#2EFF22'
        //}
      }
    }
  }
})

export default Theme

Черный фон просто задан как атрибут внутри тела в индексе. html

Моя проблема с цветами выбора:

Возраст записан в правильный цвет. Но стрелка вниз не видна (я полагаю, она черного цвета). Когда я нажимаю на кнопку выбора, она открывает небольшой список диалогов на белом фоне и черный текст. пылесос в сером. Когда я выбираю значение, оно не отображается (опять же, я полагаю, оно написано черным.

Мне нужно, чтобы стрелка была в основном зеленом, список диалогов на черном фоне, текст в основном зеленый. При пылесосе я хочу, чтобы фон пылесоса был вторичным зеленым, а текст - черным. После выбора я хочу, чтобы выделенный текст был зеленым.

Есть ли способ добиться этого. Я проверил некоторые ответы по Inte rnet и здесь, но до сих пор ничего не помогло.

Кстати, есть хороший учебник по материалу пользовательского интерфейса, потому что веб-сайт не очень помогает полный

Заранее спасибо С уважением