【问题标题】:How to change react-select color如何更改反应选择颜色
【发布时间】:2018-10-25 17:12:33
【问题描述】:

我不确定如何将颜色从默认蓝色更改为其他颜色。示例代码位于下面的代码框链接中。我尝试更改 root 的样式,但没有成功。

https://codesandbox.io/s/ly87zo23kl

【问题讨论】:

    标签: reactjs react-select


    【解决方案1】:

    react-select 的 2.1.0 版添加了覆盖主题的选项。

    这里是它如何工作的示例:

    <Select
        defaultValue={flavourOptions[0]}
        label="Single select"
        options={flavourOptions}
        theme={(theme) => ({
          ...theme,
          borderRadius: 0,
          colors: {
          ...theme.colors,
            text: 'orangered',
            primary25: 'hotpink',
            primary: 'black',
          },
        })}
      />
    

    您可以找到 here 完整的文档和实时示例以及 here 可以覆盖的不同变量。

    【讨论】:

    • 在 react v3 中,样式组件的名称令人困惑:neutral0 设置背景,primary25 设置突出显示,neutral80 设置选定文本颜色。未选中的文本颜色可以通过在父元素上设置 color: '#ffffff' 来设置。
    猜你喜欢
    • 1970-01-01
    • 2021-07-11
    • 1970-01-01
    • 2010-10-21
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-07-15
    • 1970-01-01
    相关资源
    最近更新 更多