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
Related
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
});
I was trying to build a simple e-commerce website with Next.js + Redux + Tailwind.
The problem is in this the last 2 p tags are repeated:
I think the problem is with SSR in Next.js, index.js is rendered one time on server side and on client side too.
I don't know if getInitialProps would solve this issue.
I tried using class components in _app.js and adding getInitialProps into it, but it didn't work.
My /index.js is like:
import React from "react";
import { NavbarContainer } from "../components/Navbar/Navbar.container";
import {
Box,
} from "#chakra-ui/react";
const Home = () => {
return (
<>
<Box className="">
<NavbarContainer/>
<Box spacing={3} className="btmList"> iainicback</Box>
<Box spacing={3} className="btmList"> iainicback</Box>
</Box>
</>
);
};
export default Home;
My _app.js is like:
import App from "next/app";
import { Provider } from "react-redux";
import { store } from "../redux";
import React from "react";
import "../styles/globals.css";
import { extendTheme } from "#chakra-ui/react";
import { Chakra } from "../styles/Chakra";
// 2. Extend the theme to include custom colors, fonts, etc
const colors = {
brand: {
900: "#1a365d",
800: "#153e75",
700: "#2a69ac",
200: "#384d",
},
};
const theme = extendTheme({ colors });
const MyApp = (props) => {
const { Component, appProps } = props
return (
<Provider store={store}>
<Chakra theme={theme} cookies={appProps?.cookies}>
<Component {...appProps} />
</Chakra>
</Provider>
);
}
export default MyApp
This is my folder structure:
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 use the GlobalStyle to set-up some configurations for my SAP. But i'm getting the following error:
Error: Cannot create styled-component for component:
body {
color: "white";
}
My code (App.js):
import React from 'react';
import createGlobalStyle from 'styled-components';
import MainContainer from './Components/MainContainer';
const GlobalStyle = createGlobalStyle`
body {
color: "white";
}
`;
function App() {
return (
<>
<GlobalStyle />
<MainContainer />
</>
);
}
export default App;
And in index.js, i'm using StrictMode:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root'),
);
Solved, the error was in the import of createGlobalStyle, the correct line is:
import { createGlobalStyle } from 'styled-components';
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>
);
};