I am trying to improve my UI for the react-select. I did some researches online, but I still cannot figure out how to remove the bar in the select.
Can I style the control component to remove the bar? How？
import React from 'react';
import chroma from 'chroma-js';
import { colourOptions } from './docs/data';
import Select from 'react-select';
const dot = (color = '#ccc') => ({
alignItems: 'center',
display: 'flex',
':before': {
backgroundColor: color,
borderRadius: 10,
content: ' ',
display: 'block',
marginRight: 8,
height: 10,
width: 10,
},
});
const colourStyles = {
control: styles => ({ ...styles, backgroundColor: 'white' }),
option: (styles, { data, isDisabled, isFocused, isSelected }) => {
const color = chroma(data.color);
return {
...styles,
backgroundColor: isDisabled
? null
: isSelected ? data.color : isFocused ? color.alpha(0.1).css() : null,
color: isDisabled
? '#ccc'
: isSelected
? chroma.contrast(color, 'white') > 2 ? 'white' : 'black'
: data.color,
cursor: isDisabled ? 'not-allowed' : 'default',
};
},
input: styles => ({ ...styles, ...dot() }),
placeholder: styles => ({ ...styles, ...dot() }),
singleValue: (styles, { data }) => ({ ...styles, ...dot(data.color) }),
};
export default () => (
<Select
defaultValue={colourOptions[2]}
label="Single select"
options={colourOptions}
styles={colourStyles}
/>
);
react-select allows us to control components by doing
components={{
IndicatorSeparator: () => null
}}
For example:
<Select
id="search-commodity"
options={comodityOptions}
components={{
IndicatorSeparator: () => null
}}
/>
The component you are looking to style is indicatorSeparator. For instance, add this to your styles:
indicatorSeparator: (styles) => ({display:'none'})
How did I find this out? I added classNamePrefix to the react-select properties and then used the inspector to see what the class name of the element was.
import Select from "react-select";
export default () => (
<Select
styles={{
indicatorSeparator: () => ({ display: "none" }),
}}
/>
)
You can hide indicatorSeparator with styles prop.
Be aware! Not IndicatorSeparator but indicatorSeparator.
Related
I am trying to create a dropdown list with description in React. For reference you can see the image below:
Is there any other way using bootstrap or Material-UI so I can achieve this?
I am using react-select npm package for dropdown list. you can find live link and code below:
https://codesandbox.io/embed/react-select-selected-option-background-color-forked-jpu99?fontsize=14&hidenavigation=1&theme=dark
const colourOptions = [
{ value: "red", label: "Red" ,description:"Test description for red"},
{ value: "green", label: "Green", description:"Test description for green" },
{ value: "blue", label: "Blue", description:"Test description for blue" }
];
//for styling
const colourStyles = {
option: (styles, { data, isDisabled, isFocused, isSelected }) => {
// const color = chroma(data.color);
console.log({ data, isDisabled, isFocused, isSelected });
return {
...styles,
backgroundColor: isFocused ? "#00A3BE" : "#191D2F",
font: "Segoe UI",
color: "#F9FAFC"
};
}
};
export default () => (
<Select
defaultValue={colourOptions[1]}
label="Single select"
options={colourOptions}
styles={colourStyles}
/>
);
You can override the Option component and provide your own Option that can display both title and description:
import Select, { components } from "react-select";
const colourStyles = {
option: (styles, { data, isDisabled, isFocused, isSelected }) => {
return {
...styles,
backgroundColor: isFocused ? "#00A3BE" : "",
color: isFocused ? "#F9FAFC" : "#191D2F",
display: "flex",
paddingLeft: 0,
"& .left": {
display: "flex",
justifyContent: "center",
width: 60,
marginTop: 3
},
"& .right": {
width: "100%"
},
"& .right > .title": {
display: "block",
margin: "5px 0"
}
};
}
};
const Option = (props) => {
return (
<components.Option {...props}>
<div className="left">{props.isSelected ? "✔" : ""}</div>
<div className="right">
<strong className="title">{props.data.label}</strong>
<div>{props.data.description}</div>
</div>
</components.Option>
);
};
export default () => (
<Select
defaultValue={colourOptions[1]}
label="Single select"
options={colourOptions}
styles={colourStyles}
components={{ Option }}
/>
);
Live Demo
I'm personalizing the react stripe elements provided by Stripe, but I can't change the font color, the background is working and other styles, but the font color stays on black.
This is my stripe element:
<Grid item md={6}>
<TextField
variant="outlined"
size="small"
required
fullWidth
className={classes.inputStyle}
InputProps={{
inputComponent: StripeInput,
inputProps: {
component: CardCvcElement
},
className: classes.multilineColor
}}
/>
</Grid>
It's styles:
inputFields: {
borderRadius: theme.spacing(1),
backgroundColor: '#000000',
color: '#FFF'
},
multilineColor: {
color: '#FFFFFF'
},
The StripeInput component is this:
function StripeInput ({ component: Component, inputRef, ...props }) {
const elementRef = useRef();
useImperativeHandle(inputRef, () => ({
focus: () => elementRef.current.focus
}));
return (
<Component
onReady={element => (elementRef.current = element)}
style={{
base: {
color: 'green' // The desired result is white, for the example I'm using green but no changes
}
}}
{...props}/>
)
}
export default StripeInput;
The normal text should be displayed with green or white color for example but this is the result:
The text always is displayed black
So I just fixed my issue with the font color, the fix was to add the styles to the Stripe Input component like this:
function StripeInput ({ component: Component, inputRef, ...props }) {
const elementRef = useRef();
useImperativeHandle(inputRef, () => ({
focus: () => elementRef.current.focus
}));
return (
<Component
onReady={element => (elementRef.current = element)}
options={{
style: {
base: {
color: '#FFF'
}
}
}}
{...props}/>
)
}
export default StripeInput;
I am having trouble rendering my react component since I separated my jss file and changed it from makeStyles to withStyles to avoid a hook problem.
I am getting an error message in my jss styling file as a couple of the methods have a 'theme' in the parenthesis for the styling to work off.
How do I go about changing this so that it renders correctly?
accessControl.component.js
import {connect, useSelector} from "react-redux";
import DataTable from "./userListTable.component";
import {Paper} from "#material-ui/core";
function AdminAccessControl(props) {
const { children, value, index, ...other } = props;
// select user object from redux
const user = useSelector(state => state.user);
// select school object from redux
const school = useSelector(state => state.diveSchool);
const classes = useStyles();
const [role, setRole] = useState({
userRole: "",
});
const handleChange = (property) => (e) => {
setRole({
// override the changed property and keep the rest
...role,
[property]: e.target.value,
});
}
return (
<div className={classes.root}>
<StyledTabs
value={value}
onChange={handleChange}
indicatorColor="primary"
textColor="primary"
aria-label="styled tabs example"
centered>
<StyledTab label="User Access Control" />
{/*<DataTable />*/}
<StyledTab label="Scuba School Access Control" />
{/*<DataTable />*/}
</StyledTabs>
<Typography className={classes.padding} />
</div>
);
}
function mapStateToProps(state){
const { user } = state.auth;
const { school } = state.diveSchool;
return {
user,
school,
};
}
export default compose(
connect(
mapStateToProps,
),
withStyles(useStyles)
)(AdminAccessControl);
myJss-style.js
export const useStyles = (theme) => ({
root: {
flexGrow: 1,
},
padding: {
padding: theme.spacing(3),
},
demo1: {
backgroundColor: theme.palette.background.paper,
},
demo2: {
backgroundColor: '#2e1534',
},
});
export const StyledTabs = () => ({
indicator: {
display: 'flex',
justifyContent: 'center',
backgroundColor: 'transparent',
'& > span': {
maxWidth: 40,
width: '100%',
backgroundColor: '#635ee7',
},
},
})((props) => <StyledTabs {...props} TabIndicatorProps={{ children: <span /> }} />);
export const StyledTab = (theme) => ({
root: {
textTransform: 'none',
color: '#fff',
fontWeight: theme.typography.fontWeightRegular,
fontSize: theme.typography.pxToRem(15),
marginRight: theme.spacing(1),
'&:focus': {
opacity: 1,
},
},
})((props) => <StyledTab disableRipple {...props} />);
I am using this code using React.js:
import React from "react";
import chroma from "chroma-js";
import { colourOptions } from "./docs/data";
import Select from "react-select";
const colourStyles = {
control: (styles) => ({ ...styles, backgroundColor: "white" }),
option: (styles, { data, isDisabled, isFocused, isSelected }) => {
const color = chroma(data.color);
return {
...styles,
backgroundColor: isDisabled
? null
: isSelected
? data.color
: isFocused
? color.alpha(0.1).css()
: null,
color: isDisabled
? "#ccc"
: isSelected
? chroma.contrast(color, "white") > 2
? "white"
: "black"
: data.color,
cursor: isDisabled ? "not-allowed" : "default",
":active": {
...styles[":active"],
backgroundColor:
!isDisabled && (isSelected ? data.color : color.alpha(0.3).css())
}
};
},
multiValue: (styles, { data }) => {
const color = chroma(data.color);
return {
...styles,
backgroundColor: color.alpha(0.1).css()
};
},
multiValueLabel: (styles, { data }) => ({
...styles,
color: data.color
}),
multiValueRemove: (styles, { data }) => ({
...styles,
color: data.color,
":hover": {
backgroundColor: data.color,
color: "white"
}
})
};
export default () => (
<Select
closeMenuOnSelect={false}
isMulti
options={colourOptions}
styles={colourStyles}
/>
);
And I get this:
But I would like to change the Select ... to My custom select. I read the docs but I found nothing about that.
Here is my code: https://codesandbox.io/s/codesandboxer-example-forked-d41eq?file=/example.js:0-1480
If I interpreted your question correctly you want to change the placeholder value "Select..." to something else.
This can easily be done passing a component to React Select:
<Select placeholder={<div>Custom placeholder</div>} />
When you create Select component you can pass placeholder string to it.
<Select placeholder={"My custom Select"} />
hi how to change color of arrow icon in react-select
in mouse over in google chrome, I find CSS variable but I cant change color.
this value of CSS css-tlfecz-indicatorContainer.
in my customStyles I wrote this line but not working:
indicatorContainer:base =>({
...base,
color:'#000000'
}),
UPDATE
this is my component I use react-select
import React from 'react';
import Select from 'react-select';
export default function DropDown(props) {
const customStyles = {
control: (base, state) => ({
...base,
background: "#59c5b8",
borderRadius: 0,
}),
menu: base => ({
...base,
// override border radius to match the box
borderRadius: 20,
// kill the gap
marginTop: 0,
}),
menuList: base => ({
...base,
// kill the white space on first and last option
padding: 0
}),
indicatorSeparator: base => ({
...base,
display: 'none'
}),
myDropDown__indicator: base => ({
...base,
'&.myDropDown__dropdown-indicator': {
'&.indicatorContainer': {
color: '#000000'
}
}
}),
'&.indicatorContainer': {
color: '#000000'
}
};
const [selectedOption, setSelectedOption] = React.useState(0);
const handleChange = selectedOption => {
setSelectedOption(selectedOption)
props.parentCallBack(selectedOption)
};
return (
<Select
isSearchable={false}
styles={customStyles}
isOptionDisabled={true}
defaultValue={props.options[0]}
isRtl={true}
onChange={handleChange}
options={props.options}
classNamePrefix='myDropDown'
/>
);
}
Just use customStyles and declare a new colour for dropdownIndicator element:
const customStyles = {
dropdownIndicator: base => ({
...base,
color: "red" // Custom colour
})
};
Here you can find the list of all the elements and here a live example.
Here is how I did it in version 4.3.1
const style = {
dropdownIndicator: (provided) => ({
...provided,
"svg": {
fill: "red"
}
}),
}
return (
<Select options={renderOptions()} styles={style} />
);
This should help:
import React from 'react';
import Select from 'react-select';
export default function DropDown(props) {
const customStyles = {
indicatorsContainer: () => ({
'.myDropDown': {
'&__dropdown-indicator': {
color: 'red' // <--- Color of your choice
}
}
})
};
return (
<Select
styles={customStyles}
classNamePrefix='myDropDown'
/>
);
}
PS Removed non-related code for better understanding. :)