I'm working on a React app. I have a few different stylesheets to restyle the same elements. Let's say for sake of this question I have two that have identical elements but different styles. Right now, in the app, I just import it with:
import './Stylesheet1.css';
What I'd like to do is, based on a setting for that customer in a database, it would switch to using ./Stylesheet2.css instead.
I know there are extra modules to include out there that may help and I could do things with dynamically building stylesheets and I may need to go to those options, but for now, I'd like to see if there is simply some way to dynamically swap out which CSS file I'm pointed to.
Well another way you can do this is as follow:
import style1 from './Stylesheet1.css';
import style2 from './Stylesheet1.css';
Related
I am developing my own library of react components. I am using rollup to create the build. I also want to ship css along with it which i bundled into a single styles.css file. My concern is how a user would use it. They can simply import the components using import { Component1, Component2 } from 'my-library' but they are not styled by default. This can be solved by importing the css file: import 'my-library/build/styles.css' but i feel like this import is redundant, i want the css file to be included by default in my library index.js file. I am not sure how can i achieve this.
I am using rollup and rollup-plugin-postcss.
So my question is how do i do this? Should i use some rollup plugin? Is my idea right in the first place? Maybe i should leave it to the user to decide how they want it bundled because my approach forces them to use some loader for css files?
If you want to ship external styles (instead of e.g. a CSS-in-JS system such as Emotion), that "redundant import" way is the standard, exactly because you can't know how the user of your library wants the styles applied to their page, or which loader (or bundler!) they'd want to use.
It's also possible there's no document to inject styles into at all, in case your users are server-side-rendering your component to be hydrated on the client side.
I am learning react in which I am making components and making css file for each component but if I make a className lets say "temporary" then if I make another component and while I am not importing the previous component's css file but then also if i give the class "temporary" to any other element of this component then also it take the css styling. Why is this happening I don't know.
You create multiple CSS files and several components in your React project and connect them if needed.
But this is what you see, not what happens.
React actually converts all your CSS code into a file and then outputs it.
This is also true for components.
You create dozens of CSS and JS files, but React creates two files for you.
In Recycling, we only create a few files to write more readable code.
If you have a problem with this, you can research the module.css in React and use it to prevent this from happening to you.
Again, if you have any questions about this, I am at your service.
I have an internal library that has the colour variables, Im able to grab it from the node_modules and import it on any component basically, I have imported it in the styles.scss in hopes that the child components would inherit the variable making easy to use the colours.
the challenge that I'm facing is that I need to import the variables on every component before using them even though I have them imported on the styles.scss. I would like to be able to use the colors on any component basically have them imported globally and use all over the project
I have looked into this, (Angular SCSS Global Variable Import) similar question, but seems for every use you need to import which is what I don't wanna do
the (Global scss variables for Angular components without importing them everytime) first answer seem intriguing and I would like to use it in that sense, but my variables are like those of the second answer, please help
After a thorough google search and hair pulling, finally realised the only way to achieve what I'm looking for is to add my variables to the :root pseudo. this way I was able to import the variable once on my main styles and just use them throughout on any component level
I am trying to use two snippets as components from bootsnipp, and each snippet has its own css. i tried to put them both in the style.css, but it ended up damaging one component for the other to look fine.
I'm thinking about how to use both these styles.css, since in the index.js i can only import style.css.
can i use router to use multiple pages, and import style.css in the second page? but wouldn't that mean i'll have to use the second page as app.js, which is called only once in react? this is kind of confusing me.
EDIT: can I put the css of one component in another css file, and then import it INSIDE that component instead of index.js?
it doesn't bother me by the way whether i put that component inside index.js or not; in fact, I'm not going to use it there.
I would say you need to deal with the global namespace issue. You could create two components with its own css file.
Then add a unique className to stop collisions.
The benefit here is that you could also enable code spitting, so you would only load html/css/js when you need it (see React.lazy).
—-
By trying to load two styles in different times or manners you will still have the same issue of conflicting styles.
I know this is a very bad approach when we try to add two different css frameworks in a single project. But for now, due to a project requirement, I need to add bootstrap and materialize css in a project. In root component bootstrap is used, and in child component I will use materialize.
In child component I have included materialize in the following way
import React, {Component} from 'react';
import {findDOMNode} from 'react-dom';
import screenFull from 'screenfull';
import material from 'materialize-css/dist/css/materialize.css';
import './Control.css';
but adding this way overlaps bootstrap classes which is obviously not the required behaviour.
I want to limit scope of materialize.css inside the child component only. Can anyone give me a suggestion on this?
Note: Root component was developed before, and create-react-app is not used over there. webpack configuration file has been written manually.
Please use https://fezvrasta.github.io/bootstrap-material-design/ for your project as it's based on the bootstrap the UI will have look and feel like material and you haven't to change the existing code. I recommended to use only one UI framework for you project.
As I have seen that you are facing a problem where you need to include both the css framework, I better suggest you to use https://mdbootstrap.com/.
The second thing which I suggest you is to include in your application not for specific component. If you want to make some change for specific component look and feel create separate css/scss file and include it to you component.