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.
Related
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
need a Stepper component from somewhere and the only adequate one I found was the MUI one. But my app uses react-bootstrap and I don't have it. In this post (Is it possible to install a package that contains only one component of Material-UI? ) the guys have given a package where you can import only the component you need, but for some reason I am required to do npm config set '#bit:registry' https://node.bit.dev which I am not okay with since I want everyone to be able to just do an npm install without additional configuration. Is there a workaround around that and is it actually okay to install the whole MUI kit and import just the Stepper ?
If you're using ES6 modules and a bundler that supports tree-shaking (webpack >= 2.x, parcel with a flag) you can safely use named imports and still get an optimised bundle size automatically.
You can use path imports to avoid pulling in unused modules. For instance, use:
import Stepper from '#material-ui/core/Stepper';
instead of
import { Stepper } from '#material-ui/core';
Read more about minimizing bundle size here
Please, let me know if it works or not )
I'm writing a small React app with Create-React-App. For simple styling tweaks I use tachyons-css. Due to frequent reappearing CSS styling issues I recently switched from classic CSS styling to CSS modules (also valid question for SCSS). Now I wonder if there is a way to still use both - CSS modules and tachyons styling - even though it is not possible anymore to just add an additional "classic" className to the CSS module styles object.
Before using CSS modules I used to define a class and tachyons styling (padding5 in this example) by having multiple classNames.
For example:
<ExampleComponent className="examplecomponentstyle pa5"/>
When using CSS modules the CSS class definition will now look like this:
<ExampleComponent className={styles.examplecomponentstyle}/>
How can this syntax now be combined with the previous usage of the tachyons styling? Is there something like this that could work?:
<ExampleComponent className={styles.examplecomponentstyle & "pa5"}/>
Thanks a lot!
UPDATE from 05-Sep-19:
The clsx package is exactly doing what I was trying to achieve. After installing clsx
npm install --save clsx
the ExampleComponent can then e.g. be styled using clsx like this:
<ExampleComponent className={clsx(styles.examplecomponentstyle, "pa5 bg-yellow")}/>
UPDATE from 17-May-20:
As Sandip pointed out the ClassNames package can as well as the clsx package be used to achieve the same behaviour. The number of weekly downloads of both packages even indicates that ClassNames is much more frequently used than CLSX (~5.2 mio vs ~1.6 mio weekly downloads as of May 17 2020). This link on github discusses the performance differences between the two packages.
Without any package:
className={[styles.examplecomponentstyle, "pa5"].join(" ")};
Like you already mentioned, the package clsx is pretty good:
className={clsx(styles.examplecomponentstyle, "pa5 bg-yellow")}
When using CSS modules, you can combine classes like this
import styles from "./styles.module.css";
import "./index.css";
...
<div className={`${style.header} ${style.headerLight} container`}>
...
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.
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'))