用于反应的下拉菜单的 jss 样式答案

【问题标题】：jss syles for the dropdown for react用于反应的下拉菜单的 jss 样式
【发布时间】：2020-04-07 01:19:12
【问题描述】：

我正在尝试设置占位符的样式
我使用的是 JSS，而不是 css。
所以我用谷歌搜索并找到了这个链接 Styling the placeholder in a TextField
我也尝试了 !important 但它不起作用。
你能告诉我如何解决它吗？
在下面提供我的代码 sn-p 和沙箱

https://codesandbox.io/s/react-codesandboxer-example-ntz22

const styles = theme => ({


  input: {
    // padding: 0,
    "&::placeholder": {
      //  fontSize: '14 !important',
      color: "blue !important"
    }
  }
});

class SingleSelect extends Component<*, State> {
  state = {
    isClearable: true,
    isDisabled: false,
    isLoading: false,
    isRtl: false,
    isSearchable: true
  };

  toggleClearable = () =>
    this.setState(state => ({ isClearable: !state.isClearable }));
  toggleDisabled = () =>
    this.setState(state => ({ isDisabled: !state.isDisabled }));
  toggleLoading = () =>
    this.setState(state => ({ isLoading: !state.isLoading }));
  toggleRtl = () => this.setState(state => ({ isRtl: !state.isRtl }));
  toggleSearchable = () =>
    this.setState(state => ({ isSearchable: !state.isSearchable }));
  render() {
    const {
      isClearable,
      isSearchable,
      isDisabled,
      isLoading,
      isRtl
    } = this.state;
    return (
      <Fragment>
        <Select
          className="basic-single"
          classNamePrefix="select"
          // defaultValue={colourOptions[0]}
          isDisabled={isDisabled}
          isLoading={isLoading}
          isClearable={isClearable}
          isRtl={isRtl}
          isSearchable={isSearchable}
          name="color"
          options={colourOptions}
          placeholder={"2 testing here."}
        />
      </Fragment>

【问题讨论】：

标签： javascript html css reactjs jss

【解决方案1】：

您找到的链接是Material-UI <TextField/>，但您使用的是React Select。

React select 有一个 styles 属性，它接受一个 paceholder 方法来返回占位符样式，如下所示：

<Fragment>
  <Select
    className="basic-single"
    classNamePrefix="select"
    // defaultValue={colourOptions[0]}
    isDisabled={isDisabled}
    isLoading={isLoading}
    isClearable={isClearable}
    isRtl={isRtl}
    isSearchable={isSearchable}
    name="color"
    options={colourOptions}
    placeholder={"2 testing here."}
    styles={{
      placeholder: () => ({
        color: 'blue'
      })
    }}
  />
</Fragment>

【讨论】：