I used material-UI version 4 for my project. I recently changed it to version 5.5.0. But createTheme does not work properly. None of the colors and settings used in the palette apply.
next: 11.0.0
react:17.0.2
mui : 5.5.0
theme.js
import { createTheme, responsiveFontSizes } from "#mui/material/styles";
import { deepPurple, amber } from "#mui/material/colors";
import palette from './palette';
import typography from './typography';
let theme = createTheme({
palette,
typography,
zIndex: {
appBar: 1200,
drawer: 1100
}
});
// const Theme = responsiveFontSizes(theme);
export default theme;
As you can see below I used ThemeProvider in _app.js, I put the document file in the github similar to the UI material example. Do I need to do anything else?
https://github.com/mui/material-ui/blob/master/examples/nextjs/pages/_document.js
_app.js
import React from "react";
import PropTypes from 'prop-types';
import Head from 'next/head';
import dynamic from 'next/dynamic';
import { ThemeProvider } from '#mui/styles';
import CssBaseline from '#mui/material/CssBaseline';
import { CacheProvider } from '#emotion/react';
import createEmotionCache from '../theme/createEmotionCache';
import theme from "../theme"
import { wrapper } from '../_redux/store';
import MenuTop from '../_components/Sessions/menu_top';
import Footer from '../_components/Sessions/footer';
import MenuIndex from '../_components/Sessions/menu_index';
import Header from '../_components/Sessions/header';
import Snackbar from '../_components/Sessions/Snackbar';
import "../styles/404.css";
import "../styles/index.css";
// Client-side cache, shared for the whole session of the user in the browser.
const clientSideEmotionCache = createEmotionCache();
function MyApp(props) {
const { Component, emotionCache = clientSideEmotionCache, pageProps } = props;
return (
<CacheProvider value={emotionCache}>
<Head>
</Head>
<ThemeProvider theme={theme}>
<Snackbar {...pageProps.alert} />
<MenuTop/>
<Header/>
<MenuIndex/>
{/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
<CssBaseline />
<div style={{ userSelect: "none" }}>
{/* <StylesProvider jss={jss}> */}
<Component {...pageProps} />
{/* </StylesProvider> */}
<Footer/>
</div>
</ThemeProvider>
</CacheProvider>
);
}
MyApp.propTypes = {
Component: PropTypes.elementType.isRequired,
emotionCache: PropTypes.object,
pageProps: PropTypes.object.isRequired,
};
export default wrapper.withRedux(MyApp);
You can try to remove the zIndex in the createTheme so the theme should be work.
let theme = createTheme({
palette,
typography
});
Related
I created custom button variant and added custom stylings, the problem is that when page is loading first time custom styling not applying. Stylings applying only when page is refreshed.
I had applied custom variants to Next.js projects, but this time I'm adding to React.js project without success
materialTheme.ts
import { createTheme } from '#mui/material'
import { systemColors, systemStylingSettings } from '../globalVariables'
declare module '#mui/material/Button' {
interface ButtonPropsVariantOverrides {
containedRed: true
}
}
const theme = createTheme({
components: {
// Buttons
MuiButton: {
variants: [
{
props: { variant: 'containedRed' },
style: {
backgroundColor: systemColors.orange,
borderRadius: systemStylingSettings.borderRadius,
boxShadow: 'none',
color: '#ffffff !important',
'&:hover': {
backgroundColor: systemColors.orangeDark,
boxShadow: 'none'
}
}
}
]
}
}
})
export default theme
index.js
import React, { Suspense } from 'react'
import ReactDOM from 'react-dom'
import './index.scss'
import App from './App'
import * as serviceWorker from './serviceWorker'
import './i18n'
import { Provider } from 'react-redux'
import store from './redux/store'
import { BrowserRouter as Router } from 'react-router-dom'
import { SnackbarProvider } from 'notistack'
import { ThemeProvider } from '#mui/material'
import theme from './styles/materialTheme.ts'
ReactDOM.render(
<Suspense fallback='Loading'>
<ThemeProvider theme={theme}>
<Provider store={store}>
<Router>
<SnackbarProvider maxSnack={10}>
<App />
</SnackbarProvider>
</Router>
</Provider>
</ThemeProvider>
</Suspense>,
document.getElementById('root')
)
serviceWorker.unregister()
jobs.tsx
import { Button } from '#mui/material'
import React from 'react'
const Jobs = () => {
return (
<div>
<main>
{/* Create new job button */}
<Button variant='containedRed'>Custom style button</Button>
</main>
</div>
)
}
export default Jobs
why do my MUI button components look like this instead of like the docs
no external .css file or theme changes besides the ones listed
I have the roboto font installed as well and working on the typography
I want whatever changes I make to be global
import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import CssBaseline from "#mui/material/CssBaseline";
import { createTheme, ThemeProvider } from "#mui/material";
import "#fontsource/roboto/300.css";
import "#fontsource/roboto/400.css";
import "#fontsource/roboto/500.css";
import "#fontsource/roboto/700.css";
import "./index.css";
import Home from "./views/Home";
import Login from "./views/Login";
import Register from "./views/Register";
const theme = createTheme({
components: {
Button: {
defaultProps: {
fontSize: 1000,
},
},
},
});
const App = () => {
return (
<>
<ThemeProvider theme={theme}>
<CssBaseline />
<BrowserRouter>
<Routes>
<Route path="/" exact element={<Home />} />
</Routes>
</BrowserRouter>
</ThemeProvider>
</>
);
};
export default App;
<Button variant="contained" style={{ width: 150, height: 50 }}>
I'm a Doctor
</Button>
thanks for any help
Aren't you missing an import inside the component where the button is?
import { Button } from '#mui/material';
And I think the syntax for themes is wrong, you should be using MuiButton instead of Button inside components entry.
I'm trying to apply typography changes to the theme using Material UI. But object changes are not working. However, the palette is working.
I tried to make some changes to the H3 variation and also to the default font size, but none of the changes work.
However, the colors on the palette work.
App.js
import React from "react";
import "./App.css";
import Header from "./components/ui/Header";
import { ThemeProvider } from "#material-ui/styles";
import theme from "./components/ui/Theme";
function App() {
return (
<ThemeProvider theme={theme}>
<Header />
</ThemeProvider>
);
}
export default App;
Header/index.jsx
import React from "react";
import AppBar from "#mui/material/AppBar";
import Toolbar from "#mui/material/Toolbar";
import useScrollTrigger from "#mui/material/useScrollTrigger";
import Typography from "#mui/material/Typography";
function ElevationScroll(props) {
const { children, window } = props;
const trigger = useScrollTrigger({
disableHysteresis: true,
threshold: 0,
target: window ? window() : undefined,
});
return React.cloneElement(children, {
elevation: trigger ? 10 : 0,
});
}
function Header() {
return (
<ElevationScroll>
<AppBar color="primary">
<Toolbar>
<Typography variant="h3" component="h3">
Nome de teste
</Typography>
<h3>Teste</h3>
Teste
</Toolbar>
</AppBar>
</ElevationScroll>
);
}
export default Header;
Theme.js
import { createTheme } from "#material-ui/core/styles";
const arcBlue = "#0B72B9";
const arcOrange = "#FFBA60";
export default createTheme({
typography: {
fontSize: 60,
h3: {
fontWeight: 500,
},
},
palette: {
common: {
blue: `${arcBlue}`,
orange: `${arcOrange}`,
},
primary: {
main: `${arcBlue}`,
},
secondary: {
main: `${arcOrange}`,
},
},
});
If anyone can help, I would be very grateful.
Solution
I was importing from:
import { ThemeProvider } from "#material-ui/styles";
However, according to the documentation, it needs to be:
import { ThemeProvider } from "#mui/material/styles";
What would be the approach to configure the material-ui theme object on the fly?
That behavior is implemented when a user clicks on the button "set docs colors" on the documentation page of the mui.
You can use theme-provider to create & provide the theme to your app. Basic code to create & provide theme is given below.
import { MuiThemeProvider } from '#material-ui/core';
import { createMuiTheme } from '#material-ui/core/styles';
import App from './App';
const theme = createMuiTheme({
palette: {
primary: {
light: '#757ce8',
main: '#3f50b5',
dark: '#002884',
contrastText: '#fff',
},
secondary: {
light: '#ff7961',
main: '#f44336',
dark: '#ba000d',
contrastText: '#000',
},
},
});
export default props => (
<MuiThemeProvider theme={theme}>
<App {...props}/>
</MuiThemeProvider>
);
where App is your main app component.
if you have multiple themes then you have to maintain a state where you will define which theme you want to provide.
import { MuiThemeProvider } from '#material-ui/core';
import React, { useState } from 'react';
import DarkTheme from './DarkTheme';
import LightTheme from './LightTheme';
import App from './App';
export default props => {
const [darkTheme, setDarkTheme] = useState(false);
return (
<MuiThemeProvider theme={darkTheme ? DarkTheme : LightTheme}>
<App
{...props}
darkTheme={darkTheme}
handleDarkThemeChanged={setDarkTheme}/>
</MuiThemeProvider>
);
};
I have the following component, that is build with https://material-ui-next.com/.
import React from 'react';
import { AppBar, Toolbar } from 'material-ui';
import { Typography } from 'material-ui';
import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles';
import {lightBlue} from 'material-ui/colors';
const theme = createMuiTheme({
palette: {
primary: {
main:lightBlue['A700']
},
text: {
primary: '#fff',
}
},
});
const View = (props) => (
<MuiThemeProvider theme={theme}>
<AppBar position="static">
<Toolbar>
<Typography variant="title">
{props.title}
</Typography>
</Toolbar>
</AppBar>
</MuiThemeProvider>
);
export default View;
I am trying to write a test for it:
import React from 'react';
import { shallow } from 'enzyme';
import View from '../Views/View';
import { Typography } from 'material-ui';
it('renders', () => {
const wrapper = shallow(<View title='Welcome' />);
expect(wrapper.find('Typography').text()).toEqual('Welcome');
});
How to write a test for a component, that is using material-ui components? In the case above, I tried to figure out, if the component contains Welcome.
I read https://material-ui-next.com/guides/testing/, but it is not clear, how can I write a test.
UPD: API changed from shallow to mount
Did you tried to use their API described here?
Probably your test can look something like this:
import React from 'react';
import { createMount } from 'material-ui/test-utils';
import View from '../Views/View';
import { Typography } from 'material-ui';
it('renders', () => {
const mount = createMount();
const wrapper = mount(<View title='Welcome' />);
expect(wrapper.find('Typography').text()).toEqual('Welcome');
});