React Select 调整第一个选项布局

Question

我正在尝试将第一个选项调整为以 React Select 中的选项为中心，但没有任何作用（React CSS 中的所有其他调整 Select 它正在工作）。这是我在选项值中使用的代码：

    const option = (provided, state) => ({
    ...provided,
    background: state.isSelected ? theme.colors.green600 : theme.colors.white,
    color: state.isSelected ? theme.colors.white : theme.colors.grey500,
    display: 'flex',
    fontFamily: 'CircularStd',
    lineHeight: '18px',
    fontSize: '14px',
    ':nth-child(0) ': {
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        textTransform: 'uppercase',
    },
});

obs：它位于 customStyles 内部的选项，我正在传递到 Select，例如 styles={customStyles}

Answer 1

为了设置第一个选项的样式，您可能需要定位 MenuList 的 :first-child。这是例子

const styles = {
  menuList: (provided, state) => {
    return {
      ...provided,
      "& :first-child": {
        textAlign: "center"
      }
    };
  }
};

React Select 调整第一个选项布局

React Select adjust the first option layout

css

reactjs

react-select

实例