I am writing a single page application using ReactJS and MaterialUI. Some of my components doesn't match MaterialUI docs. I found these components' styles are being updated by another NodeJS module (#craftercms/studio-ui) which is using same MaterialUI library.
Is there a way in ReactJS or MaterialUI to not load styles from specific NodeJS modules?
I know one way is to simply override styles in my theme but maintenance of that will not be fun.
You need to create your own theme and add an MUI's ThemeProvider (from #material-ui/styles) component surrounding your App.
You're probably using our CrafterCMSNextBridge component. That component has it's own theme provider, so make sure your ThemeProvider is inside so that one is the prevailing one.
Something like this…
<CrafterCMSNextBridge>
<ThemeProvider theme={yourCustomTheme}>
<App />
</ThemeProvider>
</CrafterCMSNextBridge>
Worth noting that in a coming version of our package, it'll be easier to configure the theme to use.
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'm porting to typescript this awesome project
https://github.com/codingmonk-yt/chat-app
it's a boilerplate starter for a modern chat webapp
built with material ui, where it customize extensively the default material theme
i'm not very familiar with react and material ui, truth be told, so i don't understand what am i doing wrong, i have a typescript issue when i try to migrate a styled component with its typescript version
i built a stackblitz that reproduces the issue, in the file Settings.tsx
https://stackblitz.com/edit/react-material-ui-typescript-45rmey?file=components%2FSettings.tsx,components%2FApp.tsx,theme%2Findex.tsx
as you can see i want to be able to propagate the customtheme, both inside the styledcomponent and on its sx property, but whatever i try it ends up with some typescript issue
any pointer will be greatly appreciated
I'm developing a component library in React using Styled Components and Rollup as a bundler. Also, I'm using Storybook.
Now I want to add the Open Sans font from Google Fonts. I know how to do this when developing a standard React project, but I'm not sure how to do this when developing a component library.
What I tried/ways I know of:
Adding the link to the head of the HTML document (I don't have an HTML document since I'm developing a component library)
Creating a GlobalStyles object using Styled Components and inserting an #font-face there (I don't think this is possible since the GlobalStyles object needs to be inserted in the JSX of the index.ts file which I don't have)
Does anyone know how I should handle this?
We are developing a design system for a NX monorepo that potentially in the future will have multiple apps (written in nextjs) which all will use one single component library. All of the apps need to have their own theme, but one default theme is used for all the components in the UI component library.
The UI component library needs to have access to every app's theme to overwrite the default theme. What we would like to use is scss/css modules for each component that could then be customised by each app. What tools or methods/techniques can we use to achive this functionality?
Directory structure:
/apps/site1/site1-theme -> { primary: 'red' }
/apps/site2/site2-theme -> { primary: 'blue' }
/libs/ui-lib/components
The UI library has a button component that has a default color of green. When site1 uses the button it should be red and blue for site2. We could pass theme object down as props to each of the components but that would be tedious and we rather be able to tell the ui library "this our theme use it"
The technology we are using is nx / typescript / nextjs / scss
We solve this issue in react nx monorepo
We have created theme lib with redux persist where we pass a theme object coming from the backend in ThemeProvider for each application.
I'm using styled-components in my reactjs app and I'm on a very frustrating situation, where my component defined styles get overridden by my global styles (that I import in the index.js file). I can solve this issue by using !important in those rules, but this is very far from ideal.
So, how can I make the styled-component script to inject the style dynamic tags AFTER the global injections? Is this configurable?