Как изменить текст, значок и цвет подчеркивания Выбрать в пользовательском интерфейсе материала - PullRequest
0 голосов
/ 06 марта 2019

Поэтому я хочу изменить текст , значок и подчеркивание цвет пользовательского интерфейса материала Выберите компонент от черного до белого, который выглядит следующим образом:

enter image description here

Цвета текста параметров, которые реализованы в MenuItem, по умолчанию выглядят хорошо, потому что они серые на белом:

enter image description here

Моя оригинальная документация по Select не сильно помогает, потому что в ней не сказано, какой класс CSS мне следует переопределить в классах.

import React from "react";
import ReactDOM from "react-dom";
import { withStyles } from "@material-ui/core/styles";
import FormControl from "@material-ui/core/FormControl";
import Select from "@material-ui/core/Select";
import MenuItem from "@material-ui/core/MenuItem";

const styles = theme => ({
  root: {
    background: "blue",
    backgroundColor: "blue"
  }
});

const OPTIONS = {
  A: "Option A",
  B: "Option B"
};

class App extends React.Component {
  state = {
    option: OPTIONS.A
  };
  handleOptionChange = event => {
    return this.setState({ option: event.target.value });
  };

  render() {
    const { classes } = this.props;
    return (
      <div className={classes.root}>
        <FormControl variant="outlined">
          <Select
            value={this.state.option}
            onChange={this.handleOptionChange}
            name="optionsDropdown"
          >
            <MenuItem value={OPTIONS.A}>{OPTIONS.A}</MenuItem>
            <MenuItem value={OPTIONS.B}>{OPTIONS.B}</MenuItem>
          </Select>
        </FormControl>
      </div>
    );
  }
}
const DemoApp = withStyles(styles)(App);
const rootElement = document.getElementById("root");
ReactDOM.render(<DemoApp />, rootElement);

1 Ответ

0 голосов
/ 06 марта 2019

нашел способ сделать это, переопределив root и icon классы:

const styles = theme => ({
  root: {
    background: "blue",
  },
  whiteColor: {
    color: "white"
  }
});

 ... 

<Select
  classes={{
    root: classes.whiteColor,
    icon: classes.whiteColor
  }} 
/> 

https://codesandbox.io/s/x3j9lz9z2o

enter image description here

Осталось изменить только цвет подчеркивания.

...