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

【问题标题】：Inline update to a custom react-select styles object对自定义 react-select 样式对象的内联更新
【发布时间】：2020-09-20 22:35:23
【问题描述】：

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

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

darkSelectStyles 是一个函数对象，其中每个函数返回选择的特定部分的样式，我们希望对选择的control 部分的样式进行内联更新。比如：

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

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

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) 并返回包含所有函数的对象的函数，但是如果使用大量参数来设置不同部分的样式，这种方法可能会变得非常混乱选择小部件...

【问题讨论】：

标签： javascript reactjs react-select

【解决方案1】：

这样的东西有用吗？

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

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

【讨论】：