I've encountered a very unusual issue while creating a React UI library using Mui-5.
In my UI library, I'm creating modified Mui components both at the theme level and some with extra functionality like Button with loader, but while using it, ThemeProvider is not working as expected.
I've several paths to import the components-
Importing everything from root, e.g import { Button, Alert, DefaultTheme } from 'ui-lib';
Importing components from specific dir, e.g import { Button } from 'ui-lib/core'; or import { DefaultTheme } from 'ui-lib';
But when I try to wrap DefaultTheme with components imported directly from #mui/material or ui-lib/core, styles are not being applied.
I'm unable to check where to look for the issue, as everything is working fine in the storybook and the same codes are working fine when copied and used instead of used from the library.
Some scenarios I could compile are -
WORKING -
Importing the components from #mui/material and themeProvider from ./theme/skuadDefaultTheme(copied same theme config from lib in local-app to check)
Importing everything only from ui-lib (but while trying to console theme values when using DefaultTheme, no extra colors are being consoled, which were added in DefaultTheme under the library)
NOT-WORKING -
Importing the components from ui-lib/core and themeProvider from ui-lib
Importing the components from ui-lib/core and themeProvider from ./theme/skuadDefaultTheme
Importing the components from #mui/material and themeProvider from ui-lib
I'm unable to add any code for reference as I don't even know where to check and what to debug, adding a few things that might help-
GitHub repo - https://github.com/rishavpandey43/ui-library
GitHub online codespace - https://rishavpandey43-ui-library-4v9w7gx6hjw9v.github.dev/
Steps to perform in the repo-
Once you run yarn install, run yarn start. It'll do all the linking and will run other scripts and the example-app present in the root level will start.
Open example-app/src/App.tsx and you can find a few commented lines which can be uncommented to check all possible scenarios.
I'm adding some more details which might help -
When I tried to console theme variables to see if I've overridden theme-config from the library, I couldn't see extra colors added by me, but I would like to also point even though when styles were being applied when everything was imported from root dir.
Also, I tried to style my components with styled API, and they're not working in some cases too.
When copying and using the exact same codes from the library in any normal react application, everything is working as expected.
Thanks in advance.
Related
I have a several React projects where I import some UI-components from a private NPM-package.
This UI-components package is also built using React and styled with Tailwind 3.
The projects where I import the UI-components is using Tailwind 2 and Rollup. I have the abillity to change most of this if it would help.
The CSS of this UI-components package is imported in my projects index.ts file.
(I have access to this NPM package and can change to code there as well)
One of these components is a wrapper-component. That takes in a prop called classes.
import { Wrapper } from 'our-ui-package/components/wrapper';
<Wrapper classes="pt-[30px]">
<Some-children-here />
</Wrapper>
Here I want to be able to send inn Tailwind-classes like pt-3 or even better: send in arbitrary values like pt-[30px].
Now this does not work, as the CSS for the UI-component is created when the NPM-package is build.
Is there any way I can combine the CSS from the UI-components package, as well as add any extra CSS I want to generate by sending these props to the wrapper (or any other component I make that accepts classes as props)?
Appreciate any help. Thank you so much.
Summary:
Importing components that are styled with Tailwind from a NPM-package, and send inn extra Tailwind-classes as props to said compontents, hoping the styling would update.
This does not happen, as the CSS is generated in the NPM-package is already generated when the package is built.
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.
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 building a react component library (using typescript and styled-components) and I want to reuse as much as possible code between the two targets (web and native).
I have a folder called styled, and inside that folder, I have two index files: index.ts and index.native.ts.
Inside the index.ts I have: export { default as styled } from 'styled-components'; while in the index.native.ts I have export { default as styled } from 'styled-components/native';
I know react-native uses index.native.ts instead index.ts during the build process when it is available but I really need to make the IDE (vscode) to understand that, I mean, when I'm building a Button.native.ts the statement: import { styled } from '../styled' should import from the .native barrel and the ctrl + click should let us to the .native file.
I don't know if there is a configuration to change the default import file used as a barrel, I already tried to search in the typescript documentation for some react-native preset but I didn't find anything.
It is not related to TypeScript, it is an open issue on VSCode GitHub page. Still doesn't have any solution.
Even I didn't find solution on react native vscode plugin.
By my understanding you are working on RNW, so it is not a correct expectation that VSCode understand by Ctrl+CLICK your meaning is Web or Native side.When it works in development and production so forget about opening right code by click.
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!