Develop Reference

How to access to tag style with React.js

I want to change the background color by changing the page width by conditionally writing, but to do this I need to be able to access the styles
If we wanted to write this code in JavaScript, it would be like this:
document.getElementById("number1").style.backgroundColor="red";
But what if we want to write this code with React and functional method?

I would suggest you to do that with css code by simply using media-query.
#number1 {
#media screen and (min-width: _yourBreakpoint_) {
background-color: "red";
}
}
Docs: https://www.w3schools.com/css/css3_mediaqueries_ex.asp
However If you want to dynamically change the style via react you can use the style prop of the element. Supposing that the element is a div you can simply do:
<div style={{ backgroundColor: width > breakpoint && "red" }}></div>
Docs: https://reactjs.org/docs/dom-elements.html#style

you don't have to change the styles with javascript you can just add media query to your styles, for your target devices like:
/* this is for tablets */
#media only screen and (min-device-width: 768px){
#number1{
background-color: 'red';
}
}

You could write class .backgroundRed and just use condition classes like:
className={width > breakpoint ? '.backgroundRed' : '.elseClass'}
or you can directly write styles with style attribute:
style={condition ? {backgroundImage: 'red'} : {} }

In this case you have different solutions, but if you want to dynamically change some element style, you can do the following by using the state to store a style object.
function MyComponent(props) {
// Save your style object in the state
const [style, setStyle] = useState({background: 'white'});
// Then just call setStyle when you want to update your style
// I.E. Something like this:
useEffect(() => {
window.addEventListener('resize', function () {
setStyle({...style, background: 'red'});
})
}, [])
// And bind the style to the target element
return (
<div style={style}>
My Content
</div>
)
}
This is speaking of react and element style.
In your specific situation, where you want to react to screen size, perhaps a css media query approach would be more efficient.

class is not shown in elements inspector in chrome

as shown in the image and in the circled parts, i created a class called clsTest. in this class i would like to change the
position and some propertities of the circled element in red as shown in the image. the circled elements in red are composed of
input field and icon of the calendar.
when i activate the elements inspector in chrome, the class clsTest is never present or listed among other classes. in other words
,as shown in the image, the class .clr-control-container is shown but the class clsTestis not!!
please let me know how to correctly assign a class and be able to modify its attributes to change the position and properties of
the circled element in red.
html:
<clr-date-container class="clsDateContainer">
<label id="idDateOfSprayLabel">
<p>Date:</p>
</label>
<input id="idDateOfSprayValue" class="clsTest clr-control-container" clrDate type="date" placeholder="Specify date of spray" [(ngModel)]="iDatePasser.dateOfSpray" (ngModelChange)="onDateOfSpraySet($event)" name="dateOfSpray"
value="2021-07-21" min="2021-01-01" max="2090-12-31" />
</clr-date-container>
css:
.clsTest{
bottom: 10;
right: 0px;
left: 430px;
top: 174px;
width: auto;
}
image:

I assume the default Angular style encapsulation is causing this behavior here.
Try adding the pseudo class :host to your css like this:
:host .clsTest{
bottom: 10;
right: 0px;
left: 430px;
top: 174px;
width: auto;
}
The :host tells Angular to apply the styles directly on DOM elements (not based on components/templates). Optionally, you could also add ::ng-deep to apply styles to all children of the selected element as well (where the CSS selector matches as well).

The input has the class at the moment
To see the classes of the input element just click on it(in the Element section of chrome developer tools), I specify it on the image.
Keep in mind the sequence of the classes you give to an element is important. The second class will override the first one.

Set PlaceHolder color of a textarea dynamically in React

I'm trying to set the color of a placeholder inside a text-area which is my react component dynamically but failing to do so. I'm using CSS for styles where I set my default colors but these colors are updated later by the props. I'm able to set stuff like background-color, color etc easily but unable to set nested properties or pseudo selectors like ::placeholder. Any help is appreciated.
I've tried setting it using plain JS and a couple of other inline styling practices but failing.
<div className="container-textarea">
<TextAreaWrapper
placeholder="Write message"
style={color: props.color }
/>
</div>
//In style props, the color is set dynamically but I want to set the color of that placeholder dynamically as well.
I've tried doing this
const styles = {
color : props.color,
'::placeholder' : {
color : props.color
}
}

If you use style attribute you can use selectors only css properties.
style="color: red"
But there is a way to make it work dynamically, what you need is CSS variables (real spec name are Custom Properties) so you put this CSS into your style file:
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: var(--placeholder-color);
}
::-moz-placeholder { /* Firefox 19+ */
color: var(--placeholder-color);
}
::placeholder {
color: var(--placeholder-color);
}
then you can use React to add:
<div className="container-textarea">
<TextAreaWrapper
placeholder="Write message"
style={'--placeholder-color': props.color }
/>
</div>
Also I'm not sure you don't need {{'--placeholder-color': props.color }} one curly braces are react prop value and one are JS object inside.

ReactJS material-ui TextField apply css

Im using material-ui with Reactjs. I want to apply on a TextField some custom styles using css. Specifically I want to change the color of the TextField underline and TextField label when I click the input.
I know that I could do it inline with the component but I want to use className and css.
Any ideas ?
Thanks

Since material-ui uses inline styles in JS, its not very convinient and easy to do a custom styling of components by css classes, but its still possible with !important keyword.
First you need to add cutom css class to TextField:
<TextField
id="text-field-default"
className="text-field-custom"
defaultValue="Default Value"
/>
Then, for example, underline style can be overriden like that:
.text-field-custom>input:focus+div>hr {
border-bottom: 2px solid rgb(0, 0, 0) !important;
}

Change CSS value dynamically with jQuery

I have a div:
<div class="badger-left"></div>
This CSS:
/* Change style dynamically according to the bg-color attribute added to the div from jQuery */
.badger-change:after {
background-color: attr(bg-color);
}
This jQuery to add an attribute and a class:
$('.badger-left').addClass('badger-change').attr('bg-color','red');
Since jQuery can't do :after like in CSS, I thought of this way, but it's failing. What should I try?
Thanks
Edit: The color would change dynamically from jQuery, it won't always be red.

So, you can't pass it in to a color value because it will be interpreted as a string instead of a reference. You can pass in the content value to prove this point. On that note, you'll need to give your :after some layout, either with content or with some display or dimensions.
Here is a hacky workaround. I would personally refactor this to not use the pseudo style, but this will work with your current implementation:
function addStyle(color) {
$('<style>.badger-left:after { background-color: ' + color + ';</style>').appendTo('head');
}
// example addStyle('red');
Working Demo: http://jsfiddle.net/3qK2G/

How about just changing the class of .badger-left? So do something like this:
$('.badger-left').addClass('badger-red')
$('.badger-left').addClass('badger-blue')
with css like this:
.badger-red:after {
background-color: red;
}
.badger-blue:after {
background-color: blue;
}

what you can do is to set background-color in .badger-change and have .badger-change:after inherit this value.
In .badger-change you need to set a background-color and hide it width a gradient over it.
DEMO (hover the div to see it in action)
DEMO 2 only change background-color without switching classes.
You can think of other method with inherit , like a background image of 1 pixel set hundreds of pixel away from screen in parent container and setted as repeat in pseudo-element.

Establishing a color in your CSS prior to it being added would do the trick. Then changing that classes color later would change the badger-left with the new class badger-change
CSS
/* Change style dynamically according to the bg-color attribute added to the div from jQuery */
.badger-change {
background-color: red;
}
jQuery
$('.badger-left').addClass('badger-change'); // As soon as we're loaded add badger-change class
$('#button').click(function(){ // When example button is clicked
$('.badger-change').css('backgroundColor', 'blue'); // change badger-change background to blue
});
Here we are using a button for an example of changing the color.
HTML
<div class="badger-left">Hello World</div>
<input type="button" id="button" value="Change it" />
Some example content for badger-left for example.
When the page loads badger-left is given the new class badger-change with the BG being red. Then the button fires the jQuery to change that classes BG color to blue.
JSFiddle Example