代码之家 › 专栏 › 技术社区 › Observer

如何为react-select.js设置全局样式

react-select reactjs javascript

Observer · 技术社区 · 6 年前

react-select . 据我所知,我可以采取两种方式:

使用 className 和 classNamePrefix 然后使用CSS将元素作为目标。

赞成的意见: 我可以在任何地方使用相同的样式

欺骗: 类名 类名前缀

例子:

classNamePrefix=“反应选择”

结果:

<div class="react-select-container">
  <div class="react-select__control">
    <div class="react-select__value-container">...</div>
    <div class="react-select__indicators">...</div>
  </div>
  <div class="react-select__menu">
    <div class="react-select__menu-list">
      <div class="react-select__option">...</div>
    </div>
  </div>
</div>

使用创建外部javascript文件 "Provided Styles and State"

赞成的意见:

欺骗: 每个新组件都必须使用导入的外部文件使用样式特性。

例子:

const customStyles = {
  option: (provided, state) => ({
    ...provided,
    borderBottom: '1px dotted pink',
    color: state.isSelected ? 'red' : 'blue',
    padding: 20,
  }),
  control: () => ({
    // none of react-select's styles are passed to <Control />
    width: 200,
  }),
  singleValue: (provided, state) => {
    const opacity = state.isDisabled ? 0.5 : 1;
    const transition = 'opacity 300ms';

    return { ...provided, opacity, transition };
  }
}

  const App = () => (
    <Select
      styles={customStyles}
      options={...}
    />
  );

设置多个react select组件样式的最佳方法是什么?是否可以全局设置样式,并且每个新的react select组件都会自动使用该样式?

1 回复 | 直到 6 年前

Laura 6 年前

一种方法是创建自己的选择组件,如 CustomSelect react-select 您在其中设置了一个自定义 style 或 theme 比如:

import React, { Component } from 'react'
import Select from 'react-select'

class CustomSelect extends Component {
  render() {

    const styles = {
      ...
      // what ever you need
    }

    return <Select styles={styles} {...this.props} />
  }
}

export default CustomSelect

我真的不知道这是否是最好的方法,但我已经尝试了这两种方法,并且在一个有很多人选择的大型项目中,这是维护/修改它的最简单的方法。另外,如果在某个时候需要自定义组件,那么它非常方便。

推荐文章

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

4 月前

Facundo Cabrera · 意外的应用程序错误!useNavigate()只能在<Router>组件的上下文中使用

4 月前

user29295031 · 如何使用react和vite覆盖Tailwinds css 4默认设计

4 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

5 月前

Luckkks · 过渡色工作不正常

5 月前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

5 月前

vatsal chauhan · 即使在字体预加载时,文本加载也很慢

5 月前

hasratyan · Next.js 15 API路由-动态路由中的无效GET导出错误[id]

5 月前

noblerare · Vite错误-未定义导出(SSR)

5 月前

ProfessorFinesse · 在默认表单中完成帖子请求时,“res.send”会去哪里?

5 月前