React Rtl. Conditional Import CSS

React RTL. Conditional Import CSS

I have faced this problem before, What I have done is that when my main container is mounting, I check for the language, if it's Arabic, I require the Arabic CSS file, if not I require the other.

Example:

class Main extends Component {
componentWillMount() {
if(this.props.language === 'ar') {
require('arabic.css');
} else {
require('english.css');
}
}
}

I'm using Redux as well, which makes it easier for me to get the initial or default language, and change all the other components accordingly as well.

Just make sure you have the CSS loader configured in your webpack configuration file.

how can I import multiple CSS files conditionally based on this.state data in react native

You can do like the following code

import heStyles from "./he";
import enStyles from "./en";

const styles = this.state.language = "he" ? heStyles : enStyles;

react-scripts build ignores conditional css imports

You could try something like

var cssfile;
if(isSmartPhoneOrTablet()){
cssfile = "./mobileStyle.css";
}else {
cssfile = "./style.css";
}
require(cssfile);

Not able to import multiple css without applying in React App

Importing your CSS at all is applying it right away.

You'd probably be better off if you arranged your CSS in such a way that you could conditionally apply a single class to a parent element that would then apply styles from nightlight.css.

e.g. inside nightlight.css

.night button {
/* styles for your buttons when they're in a night container */
}

.night p {
/* styles for your ps when they're in a night container */
}

etc

and then have some code in your component to either add or remove the night class depending on whether or not darkmode is enabled.

Override bootstrap css conditional from javascript

I got it. When doing a conditional import/require, webpack will always insert the file (just in case it may be called). Of course when it was a css file, it overided everything.
What I did was defining css using pure javascript (like this answer : https://stackoverflow.com/a/15494200) and it works like a charm (on chrome/ie/FF at least). I don't find it pretty, I would like to have it in a .css file, but it's already something.

    var style = document.createElement("style");
style.appendChild(document.createTextNode(""));
document.head.appendChild(style);

style.sheet.insertRule(".App { direction:rtl; }", 0);
style.sheet.insertRule(
".col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {float: right;}",
1
);`


Related Topics



Leave a reply



Submit