For example:
<div className="container col-md-3 thisstyle">
Which className
takes precendence in reactjs?
For example:
<div className="container col-md-3 thisstyle">
Which className
takes precendence in reactjs?
CSS works with selectors specifity. An ID selector has higher specificity than a class selector which has a higher specificity than a tag selector, etc...
Your question is incomplete. It depends on the actual selector that applies styles on the element.
Now if you have two selectors that have the same specificity (e.g: .container
and .thisstyle
), the one defined later in the stylesheet takes precedence, which could lead to inconsistent behaviors, so it's highly advised not to have same specificity selectors that override each other's CSS properties.
The className attribute works the same as the class attribute on traditional dom, and follows the same CSS precedence rules. In this case, it depends on the order in which they were declared in the source css files. If they were declared in different files, then the one that was imported last would take precedence.
https://css-tricks.com/the-order-of-css-classes-in-html-doesnt-matter/
In the end, className will "compile" to class when on the dom. The only reason it's named differently is because JSX is essentially JavaScript, and in JS, class is a reserved keyword.