Develop Reference

css modules in react

I am having some trouble with css modules in react I dont know how to use react modules in a dynamic way
import classnames from 'classnames'
import styles from './hover.module.css
///
///
const [flashElements,setFlashElements]=useState(elementList.map(element => {
return element.classes.flash
}))```
///
///
I want to be able to display the classes showing the value that corresponds to the element in state . is this even possible or should I approach the problem differently
I want to be to do some thing like the code below
return (
<a classname={styles.HOVER ,styles.flashElements[i]}>

Instead of import styles from './hover.module.css' try using import './hover.module.css' in your component and you can directly use the class names from your CSS file.
Use classNameinstead of classnamein your <a> tag

What happens when i use inline style and css files in React?

I am refering to a situation in which i have something like this:
import "./myCss.css"
const BeautyButton = (props) =>{
return (
<a style={{backgroundColor:"red"}} className="blue-background" >hello</a>
);
}
Which property prevails? Is there a general rule for all the properties (fontSize, width, etc)?

There is nothing different between how CSS works in React and with regular HTML. To understand which rules take effect, you'll want to study the concept of Specificity in CSS.
For your specific question, inline styles are considered more specific than styles in external stylesheets, so those styles will prevail.

How to add a class to a specific stylesheet?

I want to use CSSStyleSheet.insertRule() to insert a new class inside a specific stylesheet. That stylesheet has the id "customStylesheet" for example.
This page says "A specific style sheet can also be accessed from its owner object (Node or CSSImportRule), if any.". However I can't figure out how to access that specific stylesheet.

It is fairly straight forward.
var sheet = document.getElementById('customStylesheet').sheet;
sheet.insertRule('.someclass {display: none;}'); // was missing a ' here
Here is a fiddle showing it working. I have updated the fiddle to show it working on a style tag in the head also.

This can be done with no jQuery. Say that you wished to set everything with the class purpleText to color: purple. First, you would get the stylesheet using document.styleSheets[_index_].ownerNode.sheet. Next, use the insertRule() method. The parameter is just a string holding the CSS code, as in ".purpleText{color: purple}". So, for the first stylesheet, the whole command would be document.styleSheets[0].ownerNode.sheet.insertRule(".purpleText{color: purple}");

To get a styleSheet by ID, use this:
document.getElementById('stylesheet').sheet;

Conditional stylesheet in .vue component

I'm working with vue component (cli .vue)
I need to have my stylesheet appear only if certain boolean is true/false.
Simplest explanation would be something like :
When myVar==false, component is not loading styles.
<style v-if="myVar" lang="scss"> #import 'mystyles.css' </style>
I know it is impossible in that way, but how I'm able to do 'similar' thing?
I need to load my styles in vue if user want to use default Styles, if not I need to prevent them from being loaded.
My component is used not once but many times in page, but that condition of using/not using default css need to be apply by all components as well, so no problem here.
Any ideas?
Thanks for help or any ideas in advance :)

Using SCSS, you can wrap that CSS in a class, something like this:
<style lang="scss">
.conditional-class {
#import 'stylesheet.scss';
}
</style>
And then use a Vue class binding for that class:
<div :class="{ conditional-class: true }">
...
</div>
This way the CSS won't apply unless the class is active on that element. If you want the styles to apply all over the app, then put that class on the app root element.

Issue using multiple styles with Material-ui and Radium

I am trying to combine Radium and Material-ui. When I try to apply multiple styles on a single Material-ui component, no style is applied. So, for example, something like this produces no styling applied:
<MenuItem style={[styles.styleOne, styles.styleTwo]} >
Of course, if I do something like:
<MenuItem style={Object.assign({}, styles.styleOne, styles.styleTwo)} >
it works. Is there some way around it or this is the only way to use Radium for combining styles for a Material-ui component? And just to mention, Radium is properly set up, because applying array of styles on, for example, DIV element or works properly.
Also, I am open to any suggestion about styling a React project that uses Material-ui library. Thanks!

For material-ui components in react, we add styles using the className. If i have to add multiple styles in a material component then below are the methods:
Example 1:
<div className={`${style1} ${style2}`}>
Example 2:
import classNames from 'classnames';
<div className={classNames(classes.style1, classes.style2)} />
Specifically for your case (Radium):
What it's doing is merging 2 objects (style1 and style2) into a new anonymous object {} which is what you need to do.
You'll want to be careful when doing this however as you'll need to consider how you merge if both objects define the same key e.g. if style1 and style2 both define a height which do you use?
There's a long list of possible ways to do this on this stackoverflow thread http://stackoverflow.com/questions/171251/how-can-i-merge-properties-of-two-javascript-objects-dynamically depending on the libraries you're using and your use case they each have their own pros and cons.

Instead of adding classnames, you can also use the clsx module that comes with Material UI and combine your style classes.
{/* using arrays */}
<MyComponent classes={clsx([classes.text, classes.title])} />
{/* using conditions */}
<div className={clsx(classes.root, {
[classes.base]: true,
[classes.closed]: !open,
[classes.open]: open
})]>
{props.children}
</div>
The Material UI Mini Variant Drawer example does a great job showing this module off.

Check out this fiddle: https://jsfiddle.net/Lxh5x2qr/
It uses the JSX spread (...) operator, which is a bit nicer syntax:
styleOne: {
background: 'blue',
color: 'red'
},
styleTwo: {
background: 'green'
},
... style={{...this.styleOne, ...this.styleTwo}} ...
Please notice the the order of object does matter, just like in Object.assign.
We should not forget that MenuItem is not a DOM element, so when we apply style to it, material-ui manipulates it before applying it to the underlying element, and probably this is the reason why using an array does not work.