how to remove padding-top in menu drop-down react-select?
const customStyles = {
indicatorSeparator: styles => ({ ...styles, display: "none" }),
option: (provided, state) => ({
...provided,
fontSize: 16,
height:"40px",
paddingLeft: "11px",
":firstChild": {
margin: "10px",
padding: "10px",
borderRadius: "10px 10px 10px 10px"
}),
<Select
styles={customStyles}
defaultValue={[colourOptions[2], colourOptions[3]]}
isMulti
name="colors"
options={colourOptions}
className="basic-multi-select"
classNamePrefix="select"
/>
enter image description here
https://codesandbox.io/s/react-codesandboxer-example-90zz6
The default margin-top between the menu list and the select box can be removed easily with the props styles like this:
const styles = {
menu: base => ({
...base,
marginTop: 0
})
}
Live example here.
You should set the styles for the menuList style key according to react-select docs.
menuList: (provided, state) => ({
...provided,
paddingTop: 0,
paddingBottom: 0,
}),
use this use multi inline style by using {[firststyle,secandstyle]}
and define the second style bellow the first style as shape following
`const nopadinng={
paddingTop:0};`
and remove the classname
// remove the className
className="basic-multi-select"
const nopadinng={
paddingTop:0};
styles={[customStyles,nopadinng]}
Related
I have a component that I use as a layout component, and in nearly all cases it works just fine, however there are one or two places where I need to be able to adjust the styles, and I would like to be able to do this by simply passing the exact styles that I need instead of adding some custom prop that will toggle them on or off.
The component looks like this:
const BlockLayout: React.FC<IProps> = ({
children,
id,
forceToBottom,
sxProps, // <--- What I want to add
}) => {
return (
<Box
id={id}
sx={[
{
backgroundColor: (theme) => theme.palette.background.paper,
mt: forceToBottom ? 'auto' : 1,
borderRadius: 0.5,
display: 'flex',
border: '1px solid rgba(0, 0, 0, 0.1)',
flexWrap: 'wrap-reverse',
},
sxProps, //<--- How I could use it?
(theme) => ({
...(theme.palette.mode === 'dark' && {
border: `1px solid ${lighten(
theme.palette.background.paper,
0.15
)}`,
}),
}),
]}
>
{children}
</Box>
)
}
How can this be done, and what type do the props need to have?
In the documentation they just cast the type to const.
You can add them as follows using the spread operator:
},
sxProps && ...sxProps,
(theme) => ({
I want to remove the blue outline and box-shadow when the input tag is active.
You need to pass custom styles prop.
Something like this
const customStyles = {
control: (base, state) => ({
...base,
height: "100%",
minHeight: "100%",
border: 0,
boxShadow: "none",
}),
dropdownIndicator: (base, state) => {
return {
...base,
};
},
placeholder: (base, state) => ({
...base,
}),
singleValue: (base, state) => ({
...base,
}),
option: (base, state) => ({
...base,
}),
};
return (
<Select
//REST OF YOUR PROPS
styles={customStyles}
isSearchable={false} //This gets rid of the default cursor
/>
)
Try playing around with the customStyles object to style it further :)
The default styles are derived from a theme object, which you can mutate like styles.
The theme object is available for the styles functions as well.
<Select
label="Single select"
options={user}
theme={theme => ({
...theme,
borderRadius: 'none',
colors: {
...theme.colors,
primary25: 'primary',
primary: 'neutral5',
},
})}
/>
const style = {
control: base => ({
...base,
border: 0,
boxShadow: 'none'
})
};
Old question but the blue outline is a drop-shadow on the input field itself (at least was in my case), I ended up just adding a custom class to the select field like
<ReactSelect
title = { __( 'Title', 'lang' ) }
className = { 'your-custom-class' }
...
and then styling it out with
.your-custom-class input {
box-shadow: none;
}
I am trying to override the css of the react select options div, so in the latest react-select v2, we can pass it as styles
<Select
styles={{
option: (provided) => ({
...provided,
backgroundColor: '#fff',
border: null, // tried border: 'none'
boxShadow: null, // tried border: 'none'
outline: 0
}),
}}
/>;
i am trying to remove the border, tried with the above snippet but the border and the shadow remains same
also when click on select i need to override the blue color background on the time of click
how can i achieve this
If you want to remove the border of the entire options list, then you need to set the style on the menu component and not on the option component.
Also, for overriding the style of the Select input component you need to set the style on control component
You can try doing this -
<Select
styles={{
control: (provided, state) => ({
...provided,
boxShadow: "none",
border: state.isFocused && "none"
}),
menu: (provided, state) => ({
...provided,
border: "none",
boxShadow: "none"
}),
option: (provided, state) => ({
...provided,
backgroundColor: state.isFocused && "lightgray",
color: state.isFocused && "red"
})
}}
...
/>
Here is the list of components to be used for setting styles in react-select - https://react-select.com/styles#style-object
Having a problem with using className prop.
What's happening for me is that only the parent div gets the class and the children divs don't. As a result, they end up having background color white instead of the override color.
<Select
className="games-dropdown-2"
defaultValue={colourOptions[0]}
name="color"
options={colourOptions}
/>
Below is the css class
.games-dropdown-2 {
background-color: #023950;
color: #FFFFFF;
padding-left: 15px;
width: 93%;
}
Another problem is that the child div seems to be inheriting border css from the grandparent div which is weird.
Attaching an image to give idea.
react-select-classname-issue
For v2 it's way easier to use style-in-JS in order to customize your select. So in your case you can try something like this:
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,
// kill the gap
marginTop: 0
}),
menuList: base => ({
...base,
// kill the white space on first and last option
padding: 0
})
};
<Select styles={customStyles} options={options} />
If you need to use thus select in different files I would recommend to create a custom component so you won't have to repeat the style everywhere.
By default the text will take the color define in your general CSS file.
Here the live example.
UPDATE
Following your request in comment I have updated the code above and here a new live example.
you can solve your background color issue like below and people have also faced some issue of z-index that also solved
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}
/>
Country select of
autocomplete demo at material-ui
uses react-select and material-ui controls,
shows multiline text, select control changes it's dimensions when country doesn't fit in one line.
I see this behaviour at CodeSandbox when I decrease width of web browser.
How can I modify demo so that country will always fit in one line,
select control will not change it's dimensions?
TextField has props multiline, rows and rowsMax props that can be changed.
If that isn't what you need then you could add the following css to the text in the TextField so the text does not wrap:
overflow: hidden;
white-space: nowrap;
I managed this by mixing a few different things:
First create a class like so:
const useStyles = makeStyles((theme: Theme) =>
createStyles({
closed: {
flexWrap: "nowrap",
overflowX: "hidden",
},
// Add a linear gradient behind the buttons and over the Chips (if applies)
endAdornment: {
background:
"linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.6) 22%, rgba(255,255,255,1) 60%)",
bottom: 0,
display: "flex",
alignItems: "center",
right: "0 !important",
paddingRight: 9,
paddingLeft: theme.spacing(2),
top: 0,
},
})
);
Then in your static function add this :
const onOpenChange = (open: boolean | null) => {
setIsOpen(open);
};
const inputStyle = clsx({
[classes.closed]: !isOpen, //only when isOpen === false
});
Finally on the Autocomplete component itself use:
classes={{ inputRoot: inputStyle, endAdornment: classes.endAdornment }}
onOpen={() => onOpenChange(true)}
onClose={() => onOpenChange(false)}
If you are wondering how to make each option be displayed in just one line with ellipsis, you can do the follow:
<Autocomplete
...
getOptionLabel={(option: any) => `${option.label} (${option.code})`}
renderOption={(option) => (
<React.Fragment>
<div style={{ textOverflow: 'ellipsis', overflow: "hidden", whiteSpace: "nowrap" }}>
{option.label} ({option.code})
</div>
</React.Fragment>
)}
...
/>
For the Country Demo example, you can check what I did here: https://codesandbox.io/s/autocomplete-with-ellipsis-i8hnw