This question already has answers here:
How to make React CSS import component-scoped?
(6 answers)
Closed 1 year ago.
I have a react component and there are multiple(one.css,two.css,three.css) files defined inside css folder .In APP.js(load1.jsx , load2.jsx,load3.jsx) we are having all the js files configured .
one.css is applied to load1.jsx and two.css is applied to load2.jsx and three.css is applied to load3.jxs
but the styles of one.css is overridden by three.css in load1.jxs .
how this can be fixed in the react js.
This is because your 3 stylesheets are applied on your site, which is a single-page application. It is the same as if you imported 3 stylesheets in an html file.
An efficient and clean way for separating your styles would be to use component specific class names. For example, in a component named MyButton, you would use a prefix on all of your class names, like this: myButton-wrapper, myButton-content, myButton-label, etc. A style for a label from one component would never override the one from another component: they would be called myButton-label and myTextField-label for example.
Another solution would be MaterialUI's style lib. In each component, you create a style and apply it to the component. This style will be specific to the component and won't be shared with other components.
Also, if you want some styles to be applied globally, such as a CSS reset or generic styles, you can use a global stylesheet and use it on the root of your application: in App.js.
Related
I using ANTD framework for building an app.
And latelly i noticed one small issue with one of ANTD elements when i import antd-theme.css
For some reasons that css overides rules for one ANTD elements and makes it look terrible.
I cannot refuse from using this css stylesheets because it's needed for other elements all over the app.
So it's imported in index.js
Also i cannot overide this rule which breaks ANTD element, because it's stylesheet has 24844 lines.
And i will never find what exectly breaks it.
Believe me I tried:(
I was curiouse is there some how possible to make some element/elements ignore certain stylesheets?
Like something
<Radio style={{igonereCss}} />
I think you can give your element a class that you define and it will use that over the other styles
<radio class="mystyle">
Then in your main css style sheet just define a style for that. It doesn't have to do anything, but it might override the styles that are happening elsewhere.
.mystyle {
}
you can change style of specific component by overriding default class in your css file (you will get all the element classes from developer tool) for that element
.ant-radio-checked .ant-radio-inner{
background-color:#fdfdfd !important;
}
as a result it will override the style globally, to override the style for specific component only just wrap the component in some div by giving class "test" and override the css
.test .ant-radio-checked .ant-radio-inner{
background-color:#fdfdfd !important;
}
and it will update the style for specific component only
I need some help on CSS since my CSS is very rusty. So I am working on a project which has a couple of global CSS files and they have properties defined for various tags (ex-> .btn). I am using an external library called Form.io in my project but those global CSS files are messing up the CSS files from the library Form.io since some of the classes are already defined in the global CSS file. Is there a way to override those specific classes so that the Form.io library uses its own CSS-defined properties and not the global CSS properties?
I tried using the :not() in the global CSS file for certain classes that I think are affecting the Form.io library but doing so affects other pages and their style so that is something I don't want. Any help or suggestions would be great.
Add !important in the end of your CSS rule to ovverride global styles.
Example:
.btn {
background-color: red !important;
}
Hope this helped.
I'm using react-multiselect-checkboxes in my project.
The problem is with changing it's styling, the css classes in inspect mode have these values: .css-1r4vtzz and .css-48ayfv.
If I'm adding them in css file and override a property with !important it seems to work.
But If I add another class to that element, for example in my React app:
className="new-css-rule css-1r4vtzz" - it doesn't take into acoount the new class, even if the styling is with !important. It doesn't even show the class's name in inspect mode.
Is there a way to add that new css class and use its styling?
According to the documentation
Like props, styles supported by react-select are passed directly into
the underlying Select component. Some of the defaults have been
tweaked for the multiselect, but you can override them like normal
There are several methods of overriding the styling. They can be found here.
I would like to add a custom style or CSS to my Angular website elements without accessing the styles on the server or in another word how can I prevent the automatic access from global classes.
For example
<p>Something</p>
for the whole project the common CSS has been used. How can I prevent in order to use custom CSS. I am using it in Angular by having div with inner HTML styles.
I am currently developing a user interface using Angular 4, Angular Materials and PrimeNG components.
The latest component I am battling with is the MultiSelect Component from PrimeNG:
https://www.primefaces.org/primeng/#/multiselect
I am simply just trying to make the component's width fit 100% of the parent component.
Is there a specific process I need to follow to edit CSS classes for this component? The documentation says to use "Style" for inline - does this mean:
<p-multiSelect [options]="cars" [(ngModel)]="selectedCars" [defaultLabel]="defaultLabel" style="width: 100%;"></p-multiSelect>
Because this did not work.
It also says to use "styleClass" as a property to add a styling CSS class. How do you use this?
Lastly, they provide a list of the CSS classes the PrimeNG component uses on the website (e.g. ui-multiselect). When I attempt to modify 'ui-multiselect' by declaring it within the Angular components CSS, it still doesn't work.
Any ideas? What am I doing wrong?
For inline PrimeNG styling, use something like this:
[style]="{'width': '100%'}"
To use styleClass simply add:
styleClass="example-css-class"
This way, for example, you can style multi select input field with many different style classes, eg. Bootstrap's form-control.
When you operate with PrimeNG ui's, be sure to put them into components .css. If you use global styles.css, you'll have to override the PrimeNG files in .angular-cli.json. You can do it by editing styles array like this:
"../node_modules/primeng/resources/primeng.min.css",
"../node_modules/primeng/resources/themes/omega/theme.css",
"styles.css"
When the styles.css are put after the primeng resources, it is loaded after the primeng's, which will override the styles.