We Keep Coding

why color property not applied on element?

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

style binding by #click - vue.js

I am toggling one element and at that time, want to bind style another element. But I didn't understand how to achieve this with #click
data(){
return {
show:false,
filterStyle: {
top: 0,
background: "#dfe4ea",
marginTop: "15px",
marginBottom: "15px",
},
}
}
methods: {
closing(){
this.show = !this.show
},
}
<p class="closeMap" #click="closing()">close</p>
closing div below.
<div v-show="!show"></>
changing styles div below.
<div :style="filterStyle" class="filter"></div>
Is there someone can explain it to me?
Edit: By the way, as you see I am binding my styles, no problem with that. But not by #click... I want to bind those styles by #click.

I don't know if you want to add style on show or !show, anyway you can achieve it in this way:
<div :style="show ? filterStyle : null" class="filter"></div>
filterStyle will be applied only when show is true

I guess you could make a computed property, which changes based on this.show:
// Template
<div :style="filterStyle" class="filter"></div>
// Computed property
computed: {
filterStyle() {
if (this.show) {
return {
top: 0,
background: '#dfe4ea',
marginTop: '15px',
marginBottom: '15px'
};
} else {
return '';
}
}
}
You could also set filterStyle to something else in the click function

How to change selected react-select input color?

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 {...}

Material-UI button disappears after click

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

React, Uncaught RangeError: Maximum call stack size exceeded

I'm working in react and basically I want to make an button with tooltip, right now I'm making tooltip. I'm changing css display property in order to make it visible or not during mouse enter and leave. But there is an error and I don't know what to do...
Here is my code:
import React from 'react';
import ReactDOM from 'react-dom';
import Style from 'style-it';
var Ink = require('react-ink');
import FontIcon from '../FontIcon/FontIcon';
var IconButton = React.createClass({
getInitialState() {
return {
iconStyle: "",
style: "",
cursorPos: {},
};
},
extend(obj, src) {
Object.keys(src).forEach(function(key) { obj[key] = src[key]; });
return obj;
},
Tooltip(props) {
var style = {};
if (this.tooltipDisplay) {
style.display = "block";
} else if (!this.tooltipDisplay) {
style.display = "none";
};
return <div className="tooltip" style={style}>{_props.tooltip}</div>;
},
showTooltip(){
this.tooltipDisplay = true;
},
removeTooltip(){
this.tooltipDisplay = false;
},
render() {
var _props = this.props,
tooltip = this.Tooltip,
opts,
tooltipDisplay = false,
disabled = false,
rippleOpacity,
outterStyleMy = {
border: "none",
outline: "none",
padding: "8px 10px",
"background-color": "red",
"border-radius": 100 + "%",
cursor: "pointer",
},
iconStyleMy = {
"font-size": 12 + "px",
"text-decoration": "none",
"text-align": "center",
display: 'flex',
'justify-content': 'center',
'align-items': 'center',
},
rippleStyle = {
color: "rgba(0,0,0,0.5)",
};
if (_props.disabled || _props.disableTouchRipple) {
rippleStyle.opacity = 0;
};
this.setState({
iconStyle: _props.iconStyle
});
this.setState({
style: _props.style
});
if (_props.disabled) {
disabled = true;
};
if (this.state.labelStyle) {
iconStyleMy = this.state.iconStyle;
};
if (this.state.style) {
outterStyleMy = this.state.style;
};
if (_props.href) {
opts.href = _props.href;
};
var buttonStyle = this.extend(outterStyleMy, iconStyleMy);
return(
<Style>
{`
.IconButton{
position: relative;
}
.IconButton:disabled{
color: ${_props.disabledColor};
}
.btnhref{
text-decoration: none;
}
`}
<a {...opts} className="btnhref" >
<tooltip text={this.props.tooltip} position={this.options} />
<button ref="button" className={"IconButton" + _props.className} disabled={disabled} style={buttonStyle}
onMouseEnter={this.showTooltip} onMouseLeave={this.removeTooltip} >
<Ink background={true} style={rippleStyle} opacity={rippleOpacity} />
<FontIcon className={_props.iconClassName}/>
</button>
</a>
</Style>
);
}
});
ReactDOM.render(
<IconButton href="" className="" iconStyle="" style="" iconClassName="face" disabled="" disableTouchRipple="" tooltip="aaaaa" />,
document.getElementById('app')
);
In console I'm getting this error:
Uncaught RangeError: Maximum call stack size exceeded
at defineRefPropWarningGetter (App.js:1053)
at Object.ReactElement.createElement (App.js:1220)
at Object.createElement (App.js:3329)
at Constructor.render (App.js:43403)
at App.js:15952
at measureLifeCyclePerf (App.js:15233)
at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (App.js:15951)
at ReactCompositeComponentWrapper._renderValidatedComponent (App.js:15978)
at ReactCompositeComponentWrapper._updateRenderedComponent (App.js:15902)
at ReactCompositeComponentWrapper._performComponentUpdate (App.js:15880)
I can't find out what's wrong. I know it might be something about calling a function which in turn calls another function. But I can't see anything like this in my code and I'm not sure if it's all about it. Thanks for help :)

The problem is you are calling setState from inside your render function. State changes should only happen as a result of something changing: user clicked on a button, the browser window was resized, a picture was taken, etc.
Never ever ever ever update the state while rendering (repeat that last sentence 20 times and never forget it).
Here is the problem code:
render () {
...
this.setState({
iconStyle: _props.iconStyle
});
this.setState({
style: _props.style
});
...
}
The above code would cause an infinite loop of sorts because setState causes render to be called. Since iconStyle and style are props, and props cannot change, you should use those props to build your initial state.
getInitialState() {
return {
iconStyle: this.props.iconStyle,
style: this.props.style,
cursorPos: {},
};
}
Later, if someone clicks a button and you want the iconStyle to change, you would create a click handler which updates your state:
handleClick () {
this.setState({
iconStyle: 'clicked'
});
}
This would cause your component to be rerendered and the new state would be reflected.
Think of your "state" as someone cooking and we are going to take photographs of them cooking. The initial state is "eggs cracked: no, flour poured: no, veggies chopped: no", and you take a picture of this state. Then the chef does something - cracks the eggs. The state has now changed, and you take a picture of it. Then she cuts the veggies. Again, the state has changed and you take a picture.
Each photograph in the analogy represents your "render" function - a snapshot of the "state" at a particular point in time. If every time you took a photograph the flour got poured, well we would have to take another picture because the flour was just poured. Taking another picture would cause more flour to get poured so we'd have to take another picture. Eventually you'd fill the kitchen to the ceiling with a celiac's nightmare and suffocate everybody in the room. You'd also run out of film or hard disk space on your camera.

Thanks to #RyanWheale I noticed my mistake.
In my render function I was returning a button element which called a function which changed a certain state. The returned button looked like this:
<button onclick={this.edit()} className="button-primary">Edit</button>
And my edit function changes some state and looks like this:
edit: function () {
this.setState({editing: true});
}
So, I my mistake is that I, accidentally, typed the parenthesis after this.edit. So, when the button element was being rendered, the edit function was actually called and chaos happened. Now, when I wrote
<button onclick={this.edit} className="button-primary">Edit</button>
instead of
<button onclick={this.edit()} className="button-primary">Edit</button>
it worked flawlessly.
I hope I help someone save hours of his precious life.
Cheers :)

I faced the same problem, I had installed "reactime" extension and that extension caused me this problem. Removing that extension from my chrome, solved the issue.

I got 'Maximum call stack size exceeded', and similar errors because of framer-motion API dependency, version bigger than 4.1.17 (today's version is 5.5.5). I don't figured out why yet.
For the same extensions also, got some weird errors like 'window.webkitStorageInfo' is deprecated, and similar bugs.

I had the same error in my SPFX project while running Gulp Serve. I deleted the newly added reference in my config.json file and it worked.
More details: https://fixingsharepoint.blogspot.com/2022/04/rangeerror-maximum-call-stack-size.html