i'm working on a website that should support both ltr and rtl direction languages..i use bootstrap to do most of the styling's heavy lifting, in my react index.js i import bootstrap files as follows
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap/dist/js/bootstrap.js'
this works well when the html dir attribute is "ltr"
but when the html dir attribute is "rtl" i want to import 'bootstrap/dist/css/bootstrap.rtl.css' to handle rtl styling
i can't import both files together as that creates conflicts in the websites styling and doesn't look as desired..what can i do to import the correct file based on the html dir?
i was thinking of something like having condition inside the import statement but it didn't work
import document.documentElement.dir=="ltr"?'bootstrap/dist/css/bootstrap.css':'bootstrap/dist/css/bootstrap.rtl.css';
what can i do to achieve what i want?
EDIT: guys if you have any other different/better approach than my idea please post it in the answers, you don't have to stick to my solution's idea if there are better options
You can use conditional import to solve this problem. Here is an example to understand it.
if(document.documentElement.dir=="ltr"){
import 'bootstrap/dist/css/bootstrap.css'
}else{
import 'bootstrap/dist/css/bootstrap.rtl.css';
}
You can try to achieve this with dynamic imports
const v = document.querySelector('#test');
if (!v) {
import('bootstrap/dist/css/bootstrap.css');
}
But you should be warned, that loading might be finished when your page already loaded which may leads to the page repainting
Related
I am creating an application, created multiple CSS files but those are not able to import.
I tried by installing css-loader and style-loader. But it doesn't help
Please look below picture, I have Burger.css file. but it not visible to import
VS Code by default doesn't autocomplete all file types. If you write import ./Burger/Burger.css or import ./Burger/BurgerIngredient/BurgerIngredient.css in your Layout.js file, your css files will be loaded fine.
If you want to use autocomplete for all files in VS Code, you can use this extension.
https://marketplace.visualstudio.com/items?itemName=ionutvmi.path-autocomplete
Without Extension
With Extension
Ok since you confirmed that your ./Layout.css import does not work, you should not name your import when it's about a css file. Doing :
import './myFile.css';
is enough to apply your css.
Note that css is global in React, so you might want to use styled component or encapsulate your css to prevent side effect on other components).
Now, if you really want to add style the way you tried to, there is the style attribute which accepts an object. So you could do:
<div style={{backgroundColor: 'red'}}>Hello World !</div>
Note that the css properties are written in camelCase.
Your file structure appears to me to be...
-Burger
--BurgerIngredient
----Burger.css
--Layout
----Layout.css
Your primary application, from what it appears here, is in /Burger. Considering that, when you type import, you see the dropdown appear, showing helpful suggestions, and it lists...
-../Burger/BurgerIngredient/...
As a possible, valid location. In that case, why don't we try importing css, by typing out...
import burgercss from '../Burger/BurgerIngredient/Burger.css';
Note, for instance, Burger.css wouldn't show up until you select BurgerIngredient, because that's its conntaining folder.
I am from Angular Background and as far as I know. Each component has its own beauty and till we import a CSS file inside itthose CSS classes should not be applied even if we add to HTML Elements to the component in case we have not added or imported any CSS files for classes used inside this new/2nd component.
What I did in React was made 2 components - Home1.js and Home2.js. When I am importing a css file named Home.css to Home1 Component and NOT to Home2.js component - How in the world is those CSS classes affect being applied even too Home2 Component. This is sheer absurd.
That's why I am importing someFile.css **specifically** to the component where I want its affect to be there. This provided a kind of encapsulation affect, which I am seeing is failing. Now, someone can explain me how in the world, wherever I am not importing someFile.css, there also the classes are having affect?
Home1.js
import React, { Component } from 'react';
import './home.css';
class Home1 extends Component {
render() {
return (
<div>
<div className="red">1...</div>
<div className="green">2...</div>
<button>click</button>
</div>
)
}
}
export default Home1;
Home2.js
import React, {useState} from 'react';
const Home2 = () => {
return (
<div>
<div className="red">1..</div>
<div className="green">2...</div>
<button>click</button>
</div>
)
}
export default Home2;
Result:
Angular does it through viewEncapsulation, but this notion does not exists in react. You either need to scope your css manually by adding a main class on the top node of your component, or use a library that can do it for you (haven't tried it, you can refer to #Abdelrhman Arnos comment).
In React, like someone already had commented, you need the CSS modules to handle your problem. Actually, it's already included in the css-loader, which is a very basic module you need for webpack to handle the CSS files in the bundling process. I am not sure if you build your React app from the ground up, but I am quite sure you already had this module in your project.
{
loader: 'css-loader',
...
options: {
// Automatically enable css modules for files satisfying `/\.module\.\w+$/i` RegExp.
modules: { auto: true },
},
},
I believe you are an experienced web app programmer, and just complaining about the design of the React, but I would like to provide a little basic knowledge of browser rendering mechanism here for whom just start learning web programming and thinking about the same question.
The basic of the rendering engine in the browser is interpreting the HTML, XML documents. After loading assets by such as <script>, <style>. There are a couple of steps to complete the rendering. The step to apply CSS rules on pixels is Style calculations.
What browser does is very simple, it takes the CSS files, applies the rules, something about the scope of the styles really rely on the practice of library/framework, you can imagine that the best they can do is preprocessing the CSS files and add some unique properties to each CSS rules corresponding to the specific class names it can find in your code.
Where to import the CSS file is just for readability and maintainability. In the old times, when people still program web app with jQuery or pure JS, you just include the CSS file in the .html file, maybe it forces you to care about the naming of the classes and styles earlier, but actually we also have the same problems when you try to separate it for bigger projects.
I'm sorry to ask this again but I cannot for the life of me find out what is going on. I am moving my React app inside an angular app and have got everything working except for the material-ui/icons They are there, they just do not look as they should!
I'm using the most current packages I have the link to the styles in my index.html file and I believe I'm using the Icons correctly.
import { Close } from '#material-ui/icons'
<Close />
This is what they look like on my app.
Bad Icons Image
I don't have any console errors pertaining to material-ui or the Icons.
It should be:
import Close from '#material-ui/icons/Close'
Try this too:
import Icon from '#material-ui/core/Icon';
<Icon>close</Icon>
If your environment doesn't support tree-shaking, the recommended way to import the icons is the following:
import Close from '#material-ui/icons/Close';
If your environment support tree-shaking you can also import the icons this way:
import { Close } from '#material-ui/icons';
Importing named exports in this way will result in the code for every icon being included in your project, so is not recommended unless you configure tree-shaking. It may also impact Hot Module Reload performance if you enable it.
To enable tree shaking click me
I'm using Bootstrap 4 and Buefy in my webpack-simple Vue.js project. When I import Buefy just like in the Docs, my tag does not enlarge the text and the nav-bar in Bootstrap 4 displaying the wrong width.
My main.js file looks like this
import Vue from 'vue';
import "bootstrap/dist/css/bootstrap.min.css";
import 'buefy/dist/buefy.css';
import Buefy from 'buefy';
Vue.use(Buefy);
What it should be when I remove the import Buefy:
But importing Buefy to my main.js lead to this problem:
Buefy is based on the underlying Bulma CSS framework which conflict with Bootstrap at some points as they implies global styles and class names that may be the same.
You can try to use LESS with Bootstrap to avoid conflicts but I feel this is overcomplicating and you should just stay with one or the other, known that there is a Bootstrap-Vue port and that Bulma (Buefy also then) do exactly the same things as you can do with Bootstrap
I am developing a React Library created with create-react-library.
Works well and now I want to implement a html text editor. I chose react-draft-wysiwyg for this.
I encountered 2 problems:
Adding Editor and EditorState to my component:
import {Editor} from 'react-draft-wysiwyg';
import {EditorState} from 'draft-js';
Rollup couldn't resolve the necessary Editor and EditorState classes. It was giving the error 'name-is-not-exported-by-module'. After searching and trying, I resolved this problem by adding these lines to rollup.config.js:
commonjs({
namedExports: {
'node_modules/draft-js/lib/Draft.js': [ 'EditorState' ],
'react-draft-wysiwyg': [ 'Editor' ]
}
}),
Now the editor shows up.
Loading css
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
Styles won't load either but this time, no warning is shown in the console, they just don't load.
Any Idea how to fix this?
Are you seeing something like this?
Can you try this and see, import '../node_modules/react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
I am using the same editor, but never faced any of the above issues. Are you sure it is installed correctly? Because the first issue you faced looks like that.
The question is old but for those who are using NextJs, and are getting this problem, adding this import #import '~react-draft-wysiwyg/dist/react-draft-wysiwyg.css'; to the global CSS (or SASS, LESS ) file should work.