I have a button which is disappearing when clicked on. Also clicking the button once does not result in any button actions running. I have to click the button and then click the area where the button was after it disappears for my button actions to take effect.
<Grid className={classes.container} style={{justifyContent: 'flex-end'}} item xs={12}>
<Button className={classes.addImage} onClick={this.addPic}>
<input
className={classes.takePic}
ref="file"
id="takePic"
type="file"
accept="image/*"
onChange={this.onChange}
/>
Add
<br></br>
Image
</Button>
</Grid>
Styling:
addImage: {
display: 'flex',
backgroundColor: 'black',
color: 'white',
borderRadius: 90,
height: 100,
width: 100,
justifySelf: 'flex-end',
marginRight: '12.5%',
},
onChange function:
onChange = () => {
let newfile = this.refs.file.files[0];
let reader = new FileReader();
let url = reader.readAsDataURL(newfile);
reader.onloadend = () => {
this.setState({
...this.state,
openModal: true,
imgSrc : [reader.result],
imageType: newfile.type,
newfile: newfile,
filename: `${this.props.user.id}_${Date.now()}`
})
console.log(newfile)
console.log(this.state)
}
}
addPic function:
addPic = () => {
document.getElementById('takePic').click()
}
You have to be careful when overriding the CSS for the colors for Material-UI's Button. It is fairly easy to have an undesirable effect (particular on the "hover" state) on touch devices if you override the colors without following the pattern used within Button.
Below are excepts from Button's styles that handle the colors for the "text" variant (the default):
export const styles = theme => ({
/* Styles applied to the root element. */
root: {
color: theme.palette.text.primary,
transition: theme.transitions.create(['background-color', 'box-shadow', 'border'], {
duration: theme.transitions.duration.short,
}),
'&:hover': {
backgroundColor: fade(theme.palette.text.primary, theme.palette.action.hoverOpacity),
// Reset on touch devices, it doesn't add specificity
'#media (hover: none)': {
backgroundColor: 'transparent',
},
'&$disabled': {
backgroundColor: 'transparent',
},
},
'&$disabled': {
color: theme.palette.action.disabled,
},
},
/* Styles applied to the root element if `disabled={true}`. */
disabled: {},
});
In your addImage class, you change the button's backgroundColor to black and color to white, but you don't handle what should happen on hover. Material-UI's styling will then win for hover due to specificity, and on touch devices ('#media (hover: none)') the background will become transparent, but your change of color to "white" (instead of theme.palette.text.primary) will still be in effect which, if your page background is white, will mean that your button is now invisible.
You can fix this by being explicit about what should happen on hover as shown in my answer here: How do I change the ripple background color on Button?.
Button source code (for full details on Material-UI's styling): https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Button/Button.js
Related
Say i have a TextMenuItem, which uses MenuItem from mui, that is an item in this chain DropDownSearch > SimpleListMenu > FixedSizeList > TextMenuItem, which TLDR is a searchable dropdown component with text items.
When the text is too long for the FixedSizeList (a container) we hide the overflow, great... but we can't see the text when the text is long.
So what can i do? The PM's proposed solution was to pop-out the item text from the already popped out menu, but that does not seem right.
On mouse over is there a simple way to read? rotate? spin? the text so that the menu item text can be read while not popping from a pop-out menu?
export type TextMenuItemType = FunctionComponent<ITextMenuItemProps>;
const TextMenuItem: TextMenuItemType = (props) => {
const { text, selected, onSelect } = getTextMenuItemProps(props);
const styles = useTextMenuItemStyles();
return (
<MenuItem sx={styles.container} selected={selected} onClick={onSelect}>
<Typography sx={styles.label}>{text}</Typography>
</MenuItem>
);
};
const useTextMenuItemStyles = () => {
return css({
container: {
minHeight: 'auto',
},
label: {
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
},
});
};
This is the css that was used to get the text rotating on hover, its not ideal as it rotates on all size inputs. Ideally would like to only rotate where context overflows.
Not ideal, looking for better solutions.
container: {
minHeight: 'auto',
overflow: 'hidden',
},
label: {
whiteSpace: 'nowrap',
overflow: undefined,
overflowWrap: 'break-word',
'#keyframes scrollText': {
'0%': { transform: 'translate(0%, 0)' },
'100%': { transform: 'translate(-100%, 0)' },
},
'&:hover': {
animation: 'scrollText 4s linear infinite',
},
},
I am trying to change color of icon . I am using color property to change icon outline color. But it is not applying .I am trying like that.
"& .MuiListItemIcon-root": {
color: "red"
},
whole code is
const Drawer = styled(MuiDrawer, {
shouldForwardProp: (prop) => prop !== "open"
})(({ theme, open }) => ({
width: drawerWidth,
flexShrink: 0,
whiteSpace: "nowrap",
boxSizing: "border-box",
"& .MuiListItemIcon-root": {
color: "red"
},
...(open && {
...openedMixin(theme),
"& .MuiDrawer-paper": openedMixin(theme)
}),
...(!open && {
...closedMixin(theme),
"& .MuiDrawer-paper": closedMixin(theme)
})
}));
here is my code
https://codesandbox.io/s/priceless-hooks-5jcjym?file=/demo.tsx:1700-2144
When I insect color css is applied but not reflecting.Don't know where I am doing wrong.
**Expected output: Icon becomes Red **
It looks like you are trying to change the color of an svg. You can use the fill property to do this.
Remove the fill="white" from your svg's path so that it doesn't override the styles you apply.
<path
d="M1.02991 1.79382L0 2.41036V8.20892L1.02991 5.83065V1.79382ZM17.7396
9.99994H0.0421995L3.30317 2.30842H21L17.7396 9.99994ZM1.59746
8.97196H17.0571L19.4466 3.337H3.98692L1.59746 8.97196ZM17.9133
1.88843L16.8834 1.27189V0.12854L17.9133 0.556457V1.88843Z"
/>
Update your css selector to select the svg element and set the fill to red.
"& .MuiListItemIcon-root svg": {
fill: "red"
}
forked code: https://codesandbox.io/s/throbbing-browser-4qt1ch?file=/demo.tsx
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}
/>
I am using react-select to select and search from a list. I need to change the text color of the selected text (that is visible in the search box) to gray when the user clicks on the search box and intends to search for a new option while letting it remain black when the user clicks out of the search box/has selected a new option.
I can change the color of the text by modifying the style for singleValue in the styles prop. But cannot change the color when the search menu is selected. Tried some other options too but the text color does not change when the search menu is in the selected state.
<Select
components={{
DropdownIndicator: () => null,
IndicatorSeparator: () => null,
}}
placeholder="Search Names"
onChange={selectName}
options={namesList}
styles={{
singleValue: (styles, state) => {
return {
...styles,
color: state.isSelected ? "gray" : "black",
};
},
}}
/>;
Any suggestions what I am doing wrong here?
You need to use theme prop.
<Select
defaultValue={flavourOptions[0]}
label="Single select"
options={flavourOptions}
theme={(theme) => ({
...theme,
borderRadius: 0,
colors: {
...theme.colors,
text: 'orangered',
primary25: 'hotpink',
primary: 'black',
},
})}
/>
Credit: Original Answer Here
Using react-select (React.js) I notice that when the select field is clicked on it shows a blue-ish color.
I say blue-ish because it seems to let through some of the yellow border I gave to it too, so it may look green.
How do change this color?
I am assuming that I need the right css selector, and that I need the 'control' style key. Is that correct?
I have already managed to style the general border color, and the border color on hover:
const SelectStyle = {
control: styles => ({
...styles,
border: `1px solid ${Colors.sec6}`,
"&:hover": {
borderColor: "red"
}
}),
...
};
And I thought I could use :focus, or maybe :active to change the color when the color, but that doesn't seem to work. I have tried the following, to no avail:
"&:focus": {
borderColor: "pink"
},
"&:active": {
borderColor: "orange"
}
I have checked the list of css selectors at W3schools, but I don't see which of those could be the one that I need.
Found the answer on the react-select GitHub page.
const customStyles = {
control: (base, state) => ({
...base,
boxShadow: "none"
// You can also use state.isFocused to conditionally style based on the focus state
})
};
so, this did it for me:
boxShadow: "none"
source: https://github.com/JedWatson/react-select/issues/2728
The answer by #Rik Schoonbeek is correct on how to remove the blue border.
To further change the color, we have to set boxShadow: "none" first for the control divisor.
Then, add border color to focus-within subclass:
boxShadow: "none",
"&:focus-within": {
borderColor: "#f7c6b9",
boxShadow: "0 0 0.2rem rgba(233, 105, 71, 0.25)",
}
This way, the behavior will match that of react-bootstrap text input.
We can add either using the customStyle in js or add a wrapper divisor with a specific className and add it in scss using class_end_with_selector:
.myReactSelectClass {
[class$='-control'] {
...
}
}
Update: There is a react-select open bug when building prod DoM such that the style is not applied in prod: https://github.com/JedWatson/react-select/issues/3309
So to avoid it, add a classNamePrefix="react-select" (could be any preferred string) to enforce the classNames in prod DoM
And the using the following classNames (use react-select Prefix as an example)
.react-select__value-container {...}
.react-select__indicators {...}
.react-select__input {...}
.react-select__control {...}