MUI not load custom variant at first page load - javascript

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

MUI createTheme in nextjs

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
});

Why is index.js file rendering 2 times giving a div twice on the website?

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:

material ui (mui) button have incorrect styling

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.

Having problem to use global styles in styled-components

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';

How to configure material-ui theme on the fly?

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>
);
};

Categories

Resources