How I can fix it ?
'&:focus':{
'&:hover':{
borderColor: colors.electro
},
`&~${ classes.error }`:{
display: 'none'
},
}
How would I do the equivalent of classes.error?
You simply use $classname since there is no classes object in JSS.
Make sure you have jss-nested. You can find documentation there.
Replace the last section of your code with this:
'& $error':{
display: 'none'
},
This is assuming you have another classin your JSS that is called error. It will use the generated name. This allows you to apply classes like so: {classNames(classes.whatever, classes.error)}
If you do not have another class called error in your JSS, then you can remove the dollar symbol. This will mean that when you apply classes to your element, you can use {classNames(classes.whatever, 'error')}
Note, I am using classNames, but you could use string concat.
Related
We've been using pointerEvents: 'box-none' for a particular View where we want the things behind it to be clickable. From the React docs: https://reactnative.dev/docs/view
'box-none': The View is never the target of touch events but its subviews can be. It behaves like if the view had the following classes in CSS:
.box-none {
pointer-events: none;
}
.box-none * {
pointer-events: auto;
}
But we just updated to React 18, and now that view seems to be snagging all of the pointer events instead of letting them pass through to the background.
Any ideas what might be going wrong? Any fix suggestions?
From React docs in the yellow box:
https://reactnative.dev/docs/view#pointerevents
"Since pointerEvents does not affect layout/appearance, and we are already deviating from the spec by adding additional modes, we opt to not include pointerEvents on style. On some platforms, we would need to implement it as a className anyways. Using style or not is an implementation detail of the platform."
so you need to put it as direct prop on the ViewElement like this:
<View pointerEvents="box-none"></View>
instead of:
<View style={{pointerEvents: 'box-none'}}></View>
Its been 2 whole days i can't find any solutions.I have no solutions yets:( I'm having color states. I'll select from color picker a color, I'll update that particular color state:
Requirement is if I pick from color picker it must be passed from react js property or variables to scss variable n override them. it must be done via reacrjs to scss if it can be done from js to css then it can be done from reacr js to scss whats that one thing which m missing on it.
App.js
{
primary: '#1976D2',
secondary: '#424242',
accent: '#82B1FF',
error: '#FF5252',
info: '#2196F3',
success: '#4CAF50',
warning: '#FFC107'
}
ex: primary: '#1976D2' I'll pick in update to primary: '#ffffff' something like:
App.js
changeColor(e){
this.setState({primary:e.target.value}) // the value is updated to #ffffff
}
Now, I need to pass this.props.primary to .scss something like:
variables.scss
$primary:this.props.primary
login.scss
.btn{
background-color:$primary
}
my need is it must be dynamic if i pick from color picker it must be passed from react js property or variables to scss variable n override them
We can do it inline styling but I wanna do it the way defined above (via .scss).
Is it possible?or is the any better way?
something like this
https://vuetifyjs.com/en/style/theme
vuejs uses theme thats overides to scss variables
Vue.use(Vuetify, {
theme: {
primary: '#3f51b5',
secondary: '#b0bec5',
accent: '#8c9eff',
error: '#b71c1c'
}
})
can anyone please explain me how they r doing I'm not understanding
First. Just to clarify. You are not able to change SASS variables from browser. Because how it works: SASS code -> compiled into CSS -> CSS is sent from server to browser -> . So we actually should searching "how to override by JS something that was SASS variable in consistent way".
The only way I see doing that is using CSS custom properties. Take a look into spec to understand their caveats(e.g. it cannot be used as part of size value in #media) and about support in browsers.
I'm not really sure if SASS supports compiling variables into CSS custom properties. Take a look into css-vars mixin. With using
$css-vars-use-native: true;
you will get your variables exported as CSS custom properties. Unfortunately it means you need to change you existing styles to use var() from mixin for variables you want being able to override later
Then your code will be able to override any of custom properties as easy as
document.body.style.setProperty('--primaryColor', myColorValueFromDatePicker)
Take a look into fine and short article on how to change custom properties with JS
NB since custom properties uses the same cascade approach as any CSS you additional get ability to apply changed value on any part of DOM:
document.querySelector('#previewBlock').style.setProperty(....);
I would use Styled Components instead. There you can pass your styling by props
https://www.styled-components.com/docs/advanced
I have the following classes:
.at-icon.at-icon {}
And I need to style each element (Social network icon), that uses those classes, like this:
.at-icon.at-icon:nth-child(even) { fill: red !important }
.at-icon.at-icon:nth-child(odd) { fill: blue !important }
So one element would be red, and the other one would be blue. They all appear like this currently:
Screenshot
And my HTML using the class is:
Copy Link
The problem is: I don't have any <li> (List) in the DOM.
Unfortunately, this is all I can post here to reproduce my issue, as I'm using a third party tool, this one addthis.com
It's a free tool, you can use it for testing. I can't use it for testing as it would mean using my account resources and I might be going against their TOS.
I think what you are looking for is the descendant combinator.
What you could do is find the nearest parents of these <svg> elements that are siblings of one another, from what I can tell from your screenshot, these could be the <a> elements with the class at-share-btn applied to them.
Then, use those elements to identify the even and odd instances.
.at-share-btn:nth-child(even) {
}
.at-share-btn:nth-child(odd) {
}
After that, using the descendant combinator, target the <svg> elements within these <a> elements.
.at-share-btn:nth-child(even) .at-icon {
fill: red !important;
}
.at-share-btn:nth-child(odd) .at-icon {
fill: blue !important;
}
How can I style my React component using Sass and CSS modules based on the existence of a GLOBAL parent selector (in this case isOpen)?
Rendered HTML:
<div class="isOpen">
<div class="MyContainer__MyStyle___u9dTa">
My react component
</div>
</div>
My Sass file:
.MyStyle
margin-left: 100px
color: black
// TODO: Override MyStyle if 'isOpen' is on parent, e.g. something like:
.MyStyle
:global(.isOpen) &
margin-left: 0
color: red
The code above gives error: Property "global" must be followed by a ':'
Though it's a little late for me to answer, I think I found the answer and I'll post it for those who may encounter this problem in the future.
The problem is in Sass you have to escape the :global keyword with \:global in order to make CSS module works as you expected.
The discussion can be found at https://github.com/webpack-contrib/sass-loader/issues/448.
It looks like you have a few issues here.
"MyContainer__MyStyle___u9dTa" is one big class name. You cannot reference one part by using the period syntax. however you can reference a partial class like this..
*[class=*"MyStyle"]{}
It also looks like you are using LESS syntax instead of sass. here is how i would write the code with sass and partial class references
*[class=*"MyStyle"]{
margin-left: 100px;
color: black;
}
// TODO: Override MyStyle if 'isOpen' is on parent, e.g. something like:
.isOpen{
*[class=*"MyStyle"]{
margin-left: 0
color: red
}
}
good luck. and its worth noting that you can use vanilla CSS within a sass file if that is easier for you. Here are some resources for CSS and SASS
http://www.w3schools.com/css/css_syntax.asp
http://sass-lang.com/documentation/
this is a very easy question, but I can not decide what is the cleanest nor actually to get it to work. I have this JSX-part in a reactJS class, and would like to set position dynamically through a prop-value. Which tag attribute should I add to the following code snippet? I have seen examples with style and tried setting left and right etc without any success.
Any help is appreciated.
<img onClick={this.handleKeyPress} src="/image/1" alt="HTML5" width="200" height="200" />
JSX is a prepocessor syntax that will essentially create a bunch of React.createElement function calls with the right elements/components passed in to the different calls. So instead of doing React.createElement('div', props, children) for every container/component/piece of markup you want to create. The upside is that you can return component markup that's easy to read and understand but feels more familiar and easy to write than a ton of nested function calls.
There are a few key differences between regular HTML and JSX, though. Most of them stem from the clashes w/ JavaScript reserved words:
some attributes are camelCased and named slightly differently, like htmlFor (as opposed to for)
style gets passed in to the style property as an object via an outer JSX expression {{}}
most css names are different if they use a hyphen, but most just get camelCased. So: marginLeft, paddingRight, and so on
you can pass in style props just like you'd pass other props; they just go right into the style object you create for the component/element.
custom attributes (created with a hyphen) won't get rendered except for those that follow the aria spec (aria-, etc.)
So, taking that into consideration, your image component might look something like this:
<img onClick={this.handleKeyPress}
src="/image/1"
alt="HTML5"
style={{width: 200, height: 200, position: 'absolute', top: this.props.top, left: this.props.left}}/>
See also:
https://facebook.github.io/react/docs/dom-differences.html
https://facebook.github.io/react/docs/jsx-gotchas.html
Make sure you use the double curly braces on style or use a class:
<img onClick={this.handleKeyPress} src="/image/1" alt="HTML5" style={{width:"200", height:"200"}} />
<img onClick={this.handleKeyPress} src="/image/1" alt="HTML5" className="foo" />
In JSX ES6 an image needs to be imported before using it in component, or use src tag with require followed by image path within round braces all within curly braces.
you can set image property by using style tag followed by double curly braces. Don't need to give double or single inverted commas.
your image component might look something like this:
<img onClick={this.handleKeyPress} src={require("/image/1")} style={{ width: 200, height: 200 }} />
You can also use props or state value to define image properties in between style tag. Don't forgot to set state value before using this. You can set state values directly through props or through function.
This looks something like this (using through state values):
<img onClick={this.handleKeyPress} src={require("/image/1")} style={{ width: this.state.width, height: this.state.height }} />
OR
looks something like this (directly through props):
<img onClick={this.handleKeyPress} src={require("/image/1")} style={{ width: this.props.width, height: this.props.height }} />