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 )
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.
I have a project in React, using Material UI, and I am applying one of their suggested methods to reduce my bundle size.
Basically, I need to install the babel-plugin-transform-imports package and update the way we import components:
// Replace this (Option 1):
import Button from "#material-ui/core/Button";
// Whith this (Option 2):
import { Button } from "#material-ui/core";
Everything is working fine, however, I would like to prevent the "wrong" imports (Option 1) in the future.
Is there a way to customize a ESLint rule that will force the Option 2 import ONLY when importing from the Material UI package?
I was reading about creating a custom ESLint rule, but would prefer to avoid that route.
To my knowledge, custom is your only way to go. The only difference between these syntax is importing the default export or a named export. So if you want to prevent default imports specifically for the material-ui packages, you would need to create a custom eslint rule that looked at import statements AND match against material-ui as you don't want to error on all default imports.
After some research, I found that Material UI created a package with their own custom ESLint rules:
NPM Package:
https://www.npmjs.com/package/eslint-plugin-material-ui
GitHub page:
https://github.com/mui-org/material-ui/tree/master/packages/eslint-plugin-material-ui
They have a rule to solve my issue (restricted-path-imports), but that is not published yet. When they publish it, that may be the best way to go for me.
Discussion about publishing the rule:
https://github.com/mui-org/material-ui/issues/15610#issuecomment-512804075
UPDATE 2022
#kajirikajiri actually made eslint plugin exactly for this!
https://github.com/kajirikajiri/eslint-plugin-mui-path-imports
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`}>
...
I've installed Styled Components into my Create React App, and everything works fine, but by default, it looks as though the class name it appends to the element isn't based off of the styled component name (ie. MyButton should create an element with the class MyButton-134as23f).
In the Styled Components documentation, it says to install the babel-plugin-styled-components, and then configure the .babelrc file, however, from what I understand, we don't have access to that file until we eject from the app.
So how can I debug styled components while I am developing an app within Create React App?
I was able to find an answer to this:
Because Create React App is a zero-config application, the only way to add anything to the .babelrc file is to eject from React.
Obviously, I wanted to keep all of my tooling, and came across babel-plugin-macro. It's essentially a way for users to run libraries at compile time, without having to configure their Babel file beforehand.
So after installing it to my devDependencies, I then changed the import path to import styled from 'styled-components/macro, and all of the Babel plugin features that you would normally need to eject for came standard with Styled Components.
Let me know if you have any questions or trouble with my answer.
Hope this helps!
I have an ejected React app that is based on Create-React-App, and I am trying to install the #salesforce/design-system-react package to use the Salesforce lightning components in it. But to use this package is not as easy (seems that I need some extra configuration for Barbel and Webpeck). I don't have much experience on config Barbel and Webpeck and need some help to get me started.
Can someone please let me know how can I get that .BABELRC and the Webpack v1 files described from this site: https://react.lightningdesignsystem.com/getting-started/ ?
Many thanks,
No need to configure anything. Just import the CSS.
In your index.js, add the following line.
import "#salesforce-ux/design-system/assets/styles/salesforce-lightning-design-system.min.css";
Now you should remove the styling in App.css since the default styling in Create React App will affect your Lightning Components (font-size for example)