javascript - React下拉菜单的jss样式

Question

• 我正在尝试设计我的占位符
• 我没有使用 css，而是使用了 JSS。

• 所以我用谷歌搜索并找到了这个链接 Styling the placeholder in a TextField

• 我也试过 !important 但它不起作用。

• 你能告诉我如何解决吗？
• 在下面提供我的代码片段和沙箱

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>

Answer 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>