对自定义 react-select 样式对象的内联更新

Question

我们有一个使用 react-select 构建的 select 小部件的自定义样式，称为 darkSelectStyles，其用法如下：

<Select
    isMulti
    styles={darkSelectStyles}
    value={ourValuesArray}
    onChange={ourHandlerFunction}
    options={ourSelectOptions}
/>

darkSelectStyles 是一个函数对象，其中每个函数 returns 是 select 特定部分的样式，我们想对 select 进行内联更新select 的 control 部分的样式。类似于：

const updatedStyles = {
    ...darkSelectStyles,
    control: (provided) => ({
        ...provided,
        minWidth: '300px'
    })   
}

然而，这完全取代了我们之前的 control 样式功能...这就是我们的 darkSelectStyles 对象的样子（注意它已经有 7-8 种样式 control，在上面的例子中丢失了）：

export const darkSelectStyles = {
    container: (base) => ({
        ...base,
        display: 'inline-block'
    }),
    control: (provided, state) => ({
        ...provided,
        minHeight: '5px',
        fontSize: '1.05em',
        cursor: 'pointer',
        boxShadow: 'none',
        borderRadius: 5,
        border: 'none',
        backgroundColor: state.isDisabled ? 'rgba(167, 0, 0, 0.45)' : null,
        '&:hover': {
            backgroundColor: '#EEEEEE'
        }
    }),
    option: (provided) => ({
        ...provided,
        cursor: 'pointer',
        padding: '2px 6px 3px 6px',
        fontSize: '0.95em',
        marginTop: 0
    }),
    menu: (provided) => ({
        ...provided,
        backgroundColor: 'white',
        border: '1px solid #222222',
        boxShadow: cbbBoxShadow,
        zIndex: 999
    }),
    menuList: (provided) => ({
        ...provided,
        color: '#222222'
    }),
    singleValue: (provided, state) => ({
        ...provided,
        maxWidth: 'none',
        position: 'static',
        transform: 'none',

        // left: 0,
        color: state.isDisabled ? 'white' : '#222222',
        fontWeight: 700,
        overflow: 'initial'
    }),
    valueContainer: (provided) => ({ 
        ...provided, paddingBottom: 
        '0px', 
        paddingRight: '0px' 
    }),
    input: (provided) => ({
        ...provided,
        color: '#EEEEEE' 
    }),
    indicatorSeparator: () => ({ display: 'none' }),
    dropdownIndicator: (provided, state) => ({
        ...provided,
        padding: '0px 6px 0 2px',
        color: state.isDisabled ? 'white' : '#222222'
    })
};

如何修复 updatedStyles 函数以在不丢失其他样式的情况下处理新宽度？

编辑

我们可以将 darkSelectStyles 更改为一个函数，该函数接受参数 (minWidth) 和 returns 一个具有所有函数的对象，但是如果使用大量参数，这种方法可能会变得非常混乱为 select 小部件的不同部分设置样式...

Answer 1

这样的东西行得通吗？

const updatedStyles = {
    ...darkSelectStyles,
    control: (provided) => ({
        ...darkSelectStyles.control(provided, state), //assuming state is available
        minWidth: '300px'
    })   
}

这会调用 darkSelectStyles 中的原始 control 函数作为更新后的 control 函数中 return 的一部分，然后还会更新 minWidth .

对自定义 react-select 样式对象的内联更新

Inline update to a custom react-select styles object

javascript

reactjs

react-select

编辑