Question

我正在尝试使用材质ui进行反应，该网站的背景是黑色，颜色是绿色（2EFF22和22BF19）。

我无法根据需要设置选区（即组合框）的所有颜色。

这是我在App.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;

这是我的theme.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

黑色背景只是在index.html中设置为主体内部的一个属性

我的问题是select的颜色：

年龄以正确的颜色书写。但是向下箭头不可见（我想它是黑色的）当我单击选择时，它将在白色背景和黑色文本中打开一个小的对话框列表。胡佛呈灰色。当我选择一个值时，它不会显示（同样，我想它是用黑色写的。

我想要的是在主绿色中具有箭头，在黑色背景中具有对话框列表，在主绿色中具有文本。当鼠标悬停时，我希望将鼠标悬停在背景上为绿色，将文本作为黑色。选择之后，我希望所选的文本为绿色。

有没有办法实现这一目标。我已经在Internet和此处检查了一些答案，但是到目前为止，没有任何帮助。

顺便说一句，关于材料ui，有一个很好的教程，因为该网站对整个用户的帮助不是很大

预先感谢问候

反应-材质用户界面-无法为选择设置所有颜色

0 个答案: