How can I use reactstrap when CSS module is enable? it seem reactstrap is not working properly. I use to call css by className={classes.mycss} but then I follow instruction here https://reactstrap.github.io/ and still it didnt work. Also I imported the bootstrap css in my index.js. Any idea how to fix this?
index.js
import 'bootstrap/dist/css/bootstrap.css';
myComponent
import { Button } from 'reactstrap';
There are certain problems with this approach:
CSS Modules localises the classnames to the module it is imported in, so if you import boostrap css, you will have to repeat that in every module.
CSS Modules requires classnames that are in camel case, which the bootstrap version is not.
Bootstrap styles are not written to be localised to a language. They are often meant to be shared.
Even if we use packages like Bootstrap CSS Modules, Reactstrap depends on the global classnames and will not work.
The way to the solve this problem might be to add bootstrap as a global stylesheet file and use classNames instead of CSS Modules specific styleName.
You can do this by:
Adding a link tag to index.html file.
You can find the discussion here
Related
I have a React app, I am building this app using ParcelJS. In this app I have included an NPM package (zalify/easy-email) which styles its component by using a CSS import:
import "#arco-themes/react-easy-email-theme/css/arco.css";
The import overwrites some of my styles since Parcel treats all css imports as global imports:
By default, CSS imported from JavaScript is global. If two CSS files define the same class names, ids, custom properties, #keyframes, etc., they will potentially clash and overwrite each other. To solve this, Parcel supports CSS modules.
I'd like to not have my styles overridden. According to the Parcel docs I can use CSS modules for this. They state:
To use CSS modules, create a file with the .module.css extension, and import it from a JavaScript file with a namespace import. Then, you can access each of the classes defined in the CSS file as an export from the module.
import * as classes from './styles.module.css';
document.body.className = classes.body;
Is there a way to pass the imported CSS module to the component that expects the CSS import without having to edit the component? The component from the NPM package expects the style as global style, not a CSS module.
I have tried to import the style using require in the functional component instead but the css is still loaded globally.
Is it possible to have different CSS for Different React components.Currently am Using import "./css/name.css" to import local CSS but this same CSS is also being applied on another component even when i don't import this CSS for other Component.
If you want to use seperate css for every component you can create react app module.css feature
css module will help, or alternatively you can install styled-component via npm
I'm working on a project that's using the Carousel from react-bootstrap. This only works if I import "bootstrap/dist/css/bootstrap.min.css"; in the app. The issue is that doing so changes the CSS for the entire app, which has lots of existing UI that I would then need to rework. Is there a way to use the bootstrap CSS for the carousel component only, leaving the rest of my React app alone?
I've tried importing bootstrap.min.css in the file where the carousel component is used rather than in App.js. This doesn't seem to make a difference though.
Solution 1:
Bootstrap provides the option to include components selectively with scss. This requires you to have a build setup that handles scss for you, e.g. webpack, rollup or node-sass itself.
Edit: added minimal set of required scss classes. bootstrap 4.5
#import "../node_modules/bootstrap/scss/functions";
#import "../node_modules/bootstrap/scss/_variables";
#import "../node_modules/bootstrap/scss/_mixins";
#import "~bootstrap/scss/_carousel.scss";
The code snippet shows the main part which is required for styling the carousel. But if you have a look at the carousel.scss there are various dependencies to bootstrap functions you would have to import as well. With that it is possible to have a minimal bootstrap configuration with your required styles.
Solution 2: You might scope the component and its styles within a web component. That way the bootstrap.min.css is not leaking styles out of the carousel web component. This approach goes beyond the question and does not consider how the carousel works together with the rest of your application, as also events and JS interactions would be scoped.
I've made a component (button) with CRA and react-bootstrap,
and I exported it into bit-src,
the component has rendered without its styling,
however I've tried to push it with pure CSS and the component has rendered with its styling,
so is bootstrap didn't fit with bit-src
or I've missed something ?
You need to import all from here. Please read careful documentation.
(disclaimer - I help maintain Bit)
For the playground to fetch the bootstrap design, you need to import it to the example Bit runs. Add an import statement for react-bootstrap in the example itself, and import the design from there.
For anyone stuck in the same situation as I was.
The problem was that when I imported the component with react-bootstrap in the project it was missing the css files required by react-bootstrap to render its styling.
So the solution was to install react-bootstrap and bootstrap.
npm install --save react-bootstrap bootstrap
And add an import for the css file in index.js
import 'bootstrap/dist/css/bootstrap.min.css';
Inshort just following the get stated section of react-bootstrap solved the problem.
And I also think adding css import in the component itself may solve the problem but I have not tested it yet.
I want to selectively use semantic-ui-css classes in my components. The problem is that I use PostCSS modules option which scopes locally all the class names for a specific component. When I use semantic-ui-react components, for example a button, it renders element button with classes ui button, but the included css gets scoped locally so instead of button i get button-min_ui__14RRq
I need to do one of two things:
Import Semantic-ui css without the classes being scoped locally
Make Semantic-ui components to use classes that are being scoped locally
For now I see that I have only one option:
import React from 'react';
import { Button } from 'semantic-ui-react'
import semantic from 'semantic-ui-css/components/button.min.css'
export default class Test extends React.Component {
render(){
return (
<Button className={[semantic.ui, semantic.button]}>Click Here</Button>
)
}
}
I'm explicitly stating what classes the button is to use. It works, but I have to do that for every element and it keeps the default classes. So I get ui button button-min_ui__14RRq button-min_button__Uio9b
Is there a way of doing this without it keeping the default classes?
I'm not sure I fully understand the question, but will give it a shot. Should you try excluding the semantic/global styles from PostCSS?
eg. If you are using webpack use 'exclude' in the loader definition.
(it's something we do in one of our the projects where I work)
Laura
you are having similar problem to me.
Making External Library(Semantic ui React) and CSS module work with webpack css-loader
From my understanding,you want to exclude semantic-ui-react-library styling from css module so that it work with your application. You can create multiple rules for css loader to resolve this.
Take a look at this Using Semantic UI With CSS Modules in Webpack
I always use css of a library not the components they provide, I write my own.
So install only semantic-ui-css. Now import like below in your react application.
import ReactDOM from 'react-dom'
import 'semantic-ui-css/semantic.min.css'
import App from './App'
ReactDOM.render(<App/>, document.getElementById('root'))