React Select, how to change the font size on on the dropdown menu
const customStyles = {
control: (base) => ({
...base,
fontSize: 13,
paddingTop: 3,
}),
};
You almost got it correct. Just change the fontSize int 13 to string '13px'/'13em'. This will change the font size of the option selected.
To change the font size of the menu option, add the below code in customStyles:
menuPortal: base => ({
...base,
fontSize: '13px'
}),
You could pass styles directly as props to react-select(hoping you're talking about the same)
<Select
styles={{ menuPortal: (base) => ({ ...base, zIndex: 9999 }) }}
menuPortalTarget={document.body}
isSearchable
name="color"
menuPlacement={menuPlacement}
options={colourOptions}
menuShouldScrollIntoView={false}
/>
For more help, you could also refer to the advanced docs in react-select
https://react-select.com/advanced#portaling
how to change hover for all elements in react-select?
<Select
name="colors"
options={colourOptions}
className="basic-multi-select"
classNamePrefix="select"
/>
Source host: https://codesandbox.io/s/react-codesandboxer-example-8iq7b
To customise your select, you can use the props styles. All the different components you can change are listed here.
To target specifically the hover state you should use the follow pattern:
const styles = {
control: base => ({
...base,
"&:hover": {
borderColor: "red"
}
})
};
Other options are available such as the state inside each components depending of what you're trying to achieve.
If you want all the elements to behave depending of the state of the control component you will have to write something like this:
const styles = {
control: base => ({
...base,
"&:hover": {
borderColor: "red",
color: "red"
}
}),
dropdownIndicator: base => ({
...base,
color: "inherit"
}),
singleValue: base => ({
...base,
color: "inherit"
})
};
You would probably also kill the animation ease depending of the speed of the effect. You can see a live example here.
I have looked at this style guide and it really isn't written well at all. I have a whole list of all of the component pieces, but I have no idea how they nest. All I am looking to do is get the whole component to line up inline-block so it will fall on the same line as my label before it. But I cannot get the right part. Any help is appreciated. This component is so hard to style now for simple items.
Here is my code so far:
const customControlStyles = {
container : (provided, state) => ({
...provided,
width: 100,
backgroundColor: 'white',
display:'inline-block'
}),
menu : (provided, state) => ({
...provided,
width: 100,
backgroundColor: 'white',
color: 'black'
})
I wanted to use react-select and ran into a whole array of issues after I changed the page background color from white to custom. (The issues aren't so evident on the white background as on react-select's github page)
I'm doing the above through styles prop as the className prop wouldn't work properly.
Here is the styles prop.
const colourStyles = {
control: styles => ({ ...styles, backgroundColor: '#023950', color: 'white', border: 0 }),
option: (styles) => {
return {
backgroundColor: '#023950',
color: 'white'
};
},
singleValue: styles => ({ ...styles, color: 'white' }),
};
Here is a list of issues and if someone could help out on how to fix them. Please refer to attached image.
Notice the gap between the dropdown and the options (when you click on the dropdown to open the options)
If you see here, http://jedwatson.github.io/react-select/, there is no gap but you also can't see the source code. Clicking the source link gives a 404.
All demos here, https://react-select.com/styles, have this gap problem.
There is a white gap (within the options itself) at the top and bottom. This is different from the gap from the dropdown as mentioned in point 1. That gap is transparent showing what's behind. This one is white.
A long text resulted in options results in the whole options box having a weird whitespace issue. Is there a way to clip the text and turn it into ellipsis instead of making the options box wider and have horizontal scroll?
Related to the above problem. How to turn off horizontal scroll. Want text clipping instead.
Regarding the problem with using className prop, the class does get applied. However only to 1 of the topmost divs. It doesn't apply to the children div, which end up staying white in backgroundColor.
react-select-styling-issues
In the following live example you will find the answer to your different points.
The first 4 points you mentioned can be solved by editing the style-in-JS as following:
const customStyles = {
control: (base, state) => ({
...base,
background: "#023950",
// match with the menu
borderRadius: state.isFocused ? "3px 3px 0 0" : 3,
// Overwrittes the different states of border
borderColor: state.isFocused ? "yellow" : "green",
// Removes weird border around container
boxShadow: state.isFocused ? null : null,
"&:hover": {
// Overwrittes the different states of border
borderColor: state.isFocused ? "red" : "blue"
}
}),
menu: base => ({
...base,
// override border radius to match the box
borderRadius: 0,
// beautify the word cut by adding a dash see https://caniuse.com/#search=hyphens for the compatibility
hyphens: "auto",
// kill the gap
marginTop: 0,
textAlign: "left",
// prevent menu to scroll y
wordWrap: "break-word"
}),
menuList: base => ({
...base,
// kill the white space on first and last option
padding: 0
})
};
For the last one, as the select is supposed to be styled through JS using className props will only put a class on the outer container as mentioned here. If you really want you can still prefix the component with classNamePrefix but it won't really help you for styling.
you should try it
const colourStyles = {
menuList: styles => ({
...styles,
background: 'papayawhip'
}),
option: (styles, {isFocused, isSelected}) => ({
...styles,
background: isFocused
? 'hsla(291, 64%, 42%, 0.5)'
: isSelected
? 'hsla(291, 64%, 42%, 1)'
: undefined,
zIndex: 1
}),
menu: base => ({
...base,
zIndex: 100
})
}
const options = [
{value: 'chocolate', label: 'Chocolate'},
{value: 'strawberry', label: 'Strawberry'},
]
<Select
// defaultValue={[colourOptions[2], colourOptions[3]]}
name="colors"
options={options}
className="basic-multi-select"
classNamePrefix="select"
styles={colourStyles}
/>
This code solves my issue
const colourStyles = {
menuList: styles => ({
...styles,
background: 'papayawhip'
}),
option: (styles, {isFocused, isSelected}) => ({
...styles,
background: isFocused
? 'hsla(291, 64%, 42%, 0.5)'
: isSelected
? 'hsla(291, 64%, 42%, 1)'
: undefined,
zIndex: 1
}),
menu: base => ({
...base,
zIndex: 100
})
}
const options = [
{value: 'chocolate', label: 'Chocolate'},
{value: 'strawberry', label: 'Strawberry'},
]
<Select
// defaultValue={[colourOptions[2], colourOptions[3]]}
name="colors"
options={options}
className="basic-multi-select"
classNamePrefix="select"
styles={colourStyles}
/>
thanks..
So I'm trying to style the input field of a react-select component. Unfortunately, the font-family is being overwritten by the standard input element since the styles are being applied to the wrapper div and not the input field itself.
input: () => ({
fontFamily: `${theme.fonts.tabs.family} !important`,
fontWeight: theme.fonts.tabs.weight,
fontSize: 18,
color: theme.colors.secondary,
height: 24
}),
How would I go about changing the fontFamily without using class names?
What this code produces
What I want
React-Select renders the html input element inside the div that gets the class property that you assign when you use this input component styles.
So to extend your attempt, just add a child selector on your styles object, targeting that input.
input: () => ({
fontFamily: `${theme.fonts.tabs.family}`,
'& input': {
font: 'inherit',
},
}),
That way the rendered input inherits the font style from the div that receives the generated *-Input class.
You can use the following style-in-JS props:
control: base => ({
...base,
fontFamily: 'Times New Roman',
})
No need to use !important declaration.
EDIT
It seems to have an issue for the input and it does not render proper fontSize so have a complete experience you can add a className on your select like this:
<Select className="select" styles={styles} options={options} />
and apply the following CSS:
.select input {
font-family: "Times New Roman";
}
Here a live example.