Want to style react-select options? This new version introduces a new styles-api and some other major changes. Style individual components with custom css using the styles prop.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | const colourStyles = { control: styles => ({ ...styles, backgroundColor: 'white' }), option: (styles, { data, isDisabled, isFocused, isSelected }) => { const color = chroma(data.color); return { ...styles, backgroundColor: isDisabled ? 'red' : blue, color: '#FFF', cursor: isDisabled ? 'not-allowed' : 'default', ... }; }, ... }; export default () => ( <Select defaultValue={items[0]} label="Single select" options={items} styles={colourStyles} /> ); |
If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.
