Questions tagged [themeprovider]
45 questions
1
vote
1 answer
Wrapping bit.dev components with a ThemeProvider
I want to start using bit.dev to manage React components across multiple apps. Each app is wrapped with a Theme provider.
The bit.dev playground is failing to render the components since they are trying to consume a theme but they are not wrapped in…
Tristan Clark
- 11
- 1
1
vote
0 answers
React MUI - ThemeProvider breaks mini drawer
I'm trying to replicate the "Mini drawer" example found on the MUI Drawer page here:
https://mui.com/components/drawers/#mini-variant-drawer
But as soon as I wrap it in a ThemeProvider, even if the referenced theme is empty the layout breaks. See…
x22
- 11
- 4
1
vote
1 answer
React Mui Appbar theming
I tried theming MUI AppBar but I have no idea about theming.
Can I style an AppBar with theme without using styled component or other style api?
palette.js
import { createTheme } from '@mui/material/styles';
const theme = createTheme({
palette:…
immasaru
- 13
- 3
1
vote
0 answers
Can't get custom theme of Material UI to work
I'm trying to create a custom theme for my app using Material UI. Looking on how to do it, I found out I had to use the createTheme and the ThemeProvider. However for some reason, my theme is not overriding the default theme. In the following code…
Juan Cruz Carrau
- 177
- 10
1
vote
1 answer
Packaging a customized Material UI ThemeProvider Component
I'm creating a Material UI theme for my company using Material UI's createMuiTheme API and their ThemeProvider component. The theme works as expected when I wrap native Material UI components within it. What I'm trying to do though is create a…
proterozoic74
- 51
- 3
1
vote
1 answer
With styled components how to pass theme color from Global Style to React Icons Context Provider?
Looking for a way to pass color from theme to React Icons. Theme is working correctly and I'm able to pass colors to my styled components. Here is the breakdown:
index.js:
import React from 'react'
import ReactDOM from 'react-dom'
import App from…
DᴀʀᴛʜVᴀᴅᴇʀ
- 7,681
- 17
- 73
- 127
1
vote
0 answers
React + Material UI + Storybook + Yarn Monorepo - Theme goes back to default
Context
I'm trying to build sharable custom components (i.e. custom library) using Material UI.
My project is a mono repository with the following structure:
/
/docs (storybook)
package.json (1)
/packages
/material-ui-
…
Pedro Gomes
- 11
- 1
1
vote
1 answer
Next JS Themeprovider not getting custom styles
I'm new to Next JS and can't figure out why my background color is not being received and used by my ThemeProvider.
I feel I've copied the tutorials correctly so I must be close right?
My error is TypeError: Cannot read property 'background' of…
MomasVII
- 4,641
- 5
- 35
- 52
1
vote
1 answer
Changing the theme color value from user input on button click using ThemeProvider
I would like to understand whether it is possible to change the theme value using ThemeProvider by getting an input from the user and managing state.
I have the app that is wrapped in a ThemeProvider to manage the theme.
import styled from…
Simon Nazarenko
- 107
- 2
- 11
1
vote
1 answer
How do you toggle between light and dark themes while current theme is being locally stored?
I am fairly new to react and I'm implementing some new features using Material-UI. I am trying to switch between light and dark themes while the current theme is being locally stored within the browser. I wish to locally store the current theme as…
Elgnis3901
- 67
- 2
- 9
1
vote
2 answers
ThemeProvide used with Typescript is giving an error
I want to create a component
const StyledDiv = styled.div`
width: 10rem;
height: 3rem;
border-radius: 0.2rem;
background-color: ${({ theme, colorVariant, colorType }) => theme.colors[colorType].
[colorVariant]}
`;
But is showing an error
Property…
anandharshan
- 5,817
- 4
- 34
- 33
0
votes
0 answers
Storybook Rollup Rudux and Context API Error when converting MUI
I want to convert the Mui template into storybook. I successfully converted some components while some components are using context API and redux internally. After successfully converting them into npm package, I used npm pack . Now I'm facing this…
alic
- 41
- 4
0
votes
0 answers
Style REACT js material ui body from separate file
I outsourced my theme in a theme.js file, call this in my App.js and wanted to style the different components in the theme. My problem is, that my button does not have the specified font-size and the body isn't styled at all (fontfamily and…
yano
- 1
- 1
0
votes
0 answers
ThemeProvider custom theme injection in Material UI v5 is not working
I have been stuck on this for quite a while. I want to make my navigation bar as a primary color according to my custom theme, but ThemeProvider for some reason is not overriding the default theme not working on any other components too, the only…
Edvinas
- 1
- 1
0
votes
1 answer
ThemeProvider does not inject theme
I created a them using createTheme from @mui/material/styles, and then I tried to inject the theme using ThemeProvider from @mui/material/styles.
This is my theme:
export const darkTheme = createTheme({
palette: {
mode: "dark",
primary: {
…
hh13ff
- 13
- 4