what happens, is that in the project that I am working with, there is no use of bootstrap and therefore, it is a problem when I install bootstrap to use Reactstrap. I would like the component that I am currently using, use what I require of Reactstrap and not alter my whole project, since it overrides my project styles and that is wrong.
In my component I import the following:
import {
ButtonDropdown,
DropdownToggle,
DropdownMenu,
DropdownItem,
} from 'reactstrap';
And my view:
import '../../../node_modules/bootstrap/dist/css/bootstrap.css';
I would like to know how to make use of Reactstrap only for my view and component without altering the whole project. Thank you!
I think your best bet is going to be extracting only the css from bootstrap.css that you require for that component - this will have the benefit of not bloating your site.
Copy only the css classes required and put them in your own css file - then import that.
Related
I have used MUI on my website.
While playing with the devtools I saw many class associated with the MUI components.
Does MUI have CSS for its default components like Menu?
The layout I have with the MUI component lacks organization.
Something like
import '#mui/dist/mui.css';
as this doesnot work.
This documentation page from MUI provides your answer and more.
https://www.muicss.com/docs/v1/react/introduction
After installing it with npm (or other package manager)
npm install --save muicss
You can import either individual components as shown in the documentation
// Access all components from `muicss/react` module
import { Appbar, Button, Container } from 'muicss/react';
// Access components individually for smaller build files (RECOMMENDED)
import Appbar from 'muicss/lib/react/appbar';
import Button from 'muicss/lib/react/button';
import Container from 'muicss/lib/react/container'
Or as per your use case you can import the various css files provided in the node module directly. For example
import 'muicss/css/mui.css
Or it appears that they also provide sass
import 'muicss/lib/sass/mui/*the_component_you_want*'
The MUICSS package appears to be designed for a la carte use of components so If you're using the MUI 'framework' you may want to consider a way to avoid bloat when importing/installing from both packages.
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 using a regular react styleguidist and tried to use it with ant design. But the components are not looking like they are supposed to. I installed antd in the project also.
Project Screenshot
I have not really a clue what could be the mistake?
I think you forgot to include antd(theme) antd.css
import your antd style guide like below in your root component.
import 'antd/dist/antd.css';
You need to import antd.css check out How to import whole antd style or How to use in create-react-app docs.
import "antd/dist/antd.css";
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'))