I cannot see any change when applying "ThemeProvider" tag, even in a simple project as shown below.
There is no errors/warnings in the browser console (except for unused imports, but it fails even if I remove them all).
import React, { Component } from "react";
import Grid from "#material-ui/core/Grid";
import CssBaseline from "#material-ui/core/CssBaseline";
import MainBar from "./modules/MainBar";
import MainTemplate from "./style/MainTemplate";
import Palette from "./palette";
import { Button } from "#material-ui/core";
import { createMuiTheme } from "#material-ui/core/styles";
import { ThemeProvider } from "#material-ui/styles";
import purple from '#material-ui/core/colors/purple';
const theme = createMuiTheme({
typography: {
useNextVariants: true
},
palette: {
primary: purple,
secondary: {
main: "#f44336"
}
}
});
class App extends Component {
render() {
return (
<div className="App">
<ThemeProvider theme={theme}>
<Button color="primary">BUTTON</Button>
</ThemeProvider>
</div>
);
}
}
export default App;
Any idea about it? Its almost like documentation example, and it doesn't work.
Thank you.
Import MuiThemeProvider like,
import { MuiThemeProvider } from '#material-ui/core/styles';
And replace your code,
<ThemeProvider theme={theme}>
<Button color="primary">BUTTON</Button>
</ThemeProvider>
with this,
<MuiThemeProvider theme={theme}>
<Button color="primary">BUTTON</Button>
</MuiThemeProvider>
Ref
Related
I found these documents (_document.js, _app.js) but it is not so clear to me how it should be defined.
This is the layout.js file I started building, Is there something missing, or something that needs fixing?
Thanks.
app/layout.js
import React from 'react'
import PropTypes from 'prop-types'
import { ThemeProvider } from '#mui/material/styles'
import CssBaseline from '#mui/material/CssBaseline'
import { CacheProvider } from '#emotion/react'
import theme, { roboto } from '../utility/theme'
import Head from './Head'
import createEmotionCache from '../utility/createEmotionCache'
const clientSideEmotionCache = createEmotionCache()
export default function RootLayout({ children }, props) {
const { Component, cache = clientSideEmotionCache, pageProps } = props
return (
<html className={roboto.className}>
<CacheProvider value={cache}>
<Head />
<body>
<ThemeProvider theme={theme}>
<CssBaseline />
<Component {...pageProps}>{children}</Component>
</ThemeProvider>
</body>
</CacheProvider>
</html>
)
}
RootLayout.propTypes = {
Component: PropTypes.elementType.isRequired,
emotionCache: PropTypes.object,
pageProps: PropTypes.object.isRequired,
}
I am using Next.js with Material UI. I am having troubles with using Tailwind with MUI. I've been following this guide but it still doesn't work. The file loads but the classes just don't apply. If someone could help, that would be wonderful!
My Tailwind Config
module.exports = {
important: "#__next",
content: ["./pages/**/*.{js,jsx}"],
theme: {
extend: {},
},
plugins: [],
}
My _app.js
//import '../styles/globals.css'
//function MyApp({ Component, pageProps }) {
// return <Component {...pageProps} />
//}
//export default MyApp
import '../styles/edit.css';
import * as React from 'react';
import PropTypes from 'prop-types';
import Head from 'next/head';
import { ThemeProvider, StyledEngineProvider } from '#mui/material/styles';
import CssBaseline from '#mui/material/CssBaseline';
import { CacheProvider } from '#emotion/react';
import theme from '../config/themeConfig';
import createEmotionCache from '../functions/createEmotionCache';
import Layout from "../components/Layout";
//import '../styles/tailwind.css';
// Client-side cache, shared for the whole session of the user in the browser.
const clientSideEmotionCache = createEmotionCache();
export default function MyApp(props) {
const { Component, emotionCache = clientSideEmotionCache, pageProps } = props;
return (
<Layout>
<CacheProvider value={emotionCache}>
<Head>
<meta name="viewport" content="initial-scale=1, width=device-width" />
</Head>
<ThemeProvider theme={theme}>
<StyledEngineProvider injectFirst>
{/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
<CssBaseline />
<Component {...pageProps} />
</StyledEngineProvider>
</ThemeProvider>
</CacheProvider>
</Layout>
);
}
MyApp.propTypes = {
Component: PropTypes.elementType.isRequired,
emotionCache: PropTypes.object,
pageProps: PropTypes.object.isRequired,
};
Thanks!
You didn't follow the guide ( https://mui.com/material-ui/guides/interoperability/#tailwind-css ) correctly.
In your tailwind.config.js file you need to set the corePlugins parameter to disable the preflight CSS. The preflight CSS is overriding some of the styles of MUI.
I am using Next.js with Material-UI as the framework.
I have Layout component that wraps the contents with Material-UI <Container>.
I would like to override the style of Layout that limits the width of background, so that the background would extend to the full screen.
components/Layout.js
import { Container } from '#material-ui/core';
export default function Layout({ children }) {
return <Container>{children}</Container>;
}
pages/_app.js
import Layout from '../components/Layout';
...
<Layout>
<Component {...pageProps} />
</Layout>
...
pages/index.js
export default function App() {
return (
<div style={{ backgroundColor: "yellow" }}>
Home Page
</div>
)
}
Using Layout component comes in handy in most cases but sometimes I do want to override the certain styles of Layout from the child component.
In this case, how do I override the style of Layout component that puts the limit on maxWidth?
I tried to add {width: '100vw'} inside the style of pages/index.js, but did not work.
Any help would be appreciated.
Link to the SandBox
Using React Context is how I've solved this issue.
context/ContainerContext.js
import React from 'react';
const ContainerContext = React.createContext();
export default ContainerContext;
components/Layout.js
import React, { useState } from 'react';
import { Container } from '#material-ui/core';
import ContainerContext from '../context/ContainerContext';
export default function Layout({ children }) {
const [hasContainer, setHasContainer] = useState(true);
const Wrapper = hasContainer ? Container : React.Fragment;
return (
<ContainerContext.Provider value={{ hasContainer, setHasContainer }}>
<Wrapper>{children}</Wrapper>
</ContainerContext.Provider>
);
}
pages/index.js
import { useContext, useLayoutEffect } from 'react';
import ContainerContext from '../context/ContainerContext';
export default function App() {
const { setHasContainer } = useContext(ContainerContext);
// Where the magic happens!
useLayoutEffect(() => {
setHasContainer(false);
}, []);
return (
<div style={{ backgroundColor: "yellow" }}>
Home Page
</div>
);
}
I've used Material UI quite a lot, so this is baffling. I've looked through the docs, I've checked my code, I can't see the issue. I want my H2 tag in the nested component to use Arial. However, it's rendering using Times. I'm not sure why.
Here's my index.tsx:
import React from "react";
import ReactDOM from "react-dom";
import App from "./components/App";
import { Provider } from "react-redux";
import configureStore from "./redux/stores/main";
import * as serviceWorker from "./serviceWorker";
import { createMuiTheme } from "#material-ui/core";
import myTheme from "./styling/mainTheme";
import { ThemeProvider } from "#material-ui/styles";
const theme = createMuiTheme({
typography: {
fontFamily: ["Arial"].join(",")
}
});
ReactDOM.render(
<ThemeProvider theme={theme}>
<Provider store={configureStore()}>
<App />
</Provider>
</ThemeProvider>,
document.getElementById("root")
);
serviceWorker.unregister();
My app component:
import React from "react";
import { useSelector } from "react-redux";
import HeaderContainer from "../containers/layout/header/HeaderContainer";
import { ThemeProvider, useTheme } from "#material-ui/styles";
import theme from "../styling/mainTheme";
import { createMuiTheme } from "#material-ui/core";
const App: React.FC = () => {
const theme = useTheme();
return (
<div className="App">
<HeaderContainer />
</div>
);
};
export default App;
The header container (will contain logic):
import * as React from 'react';
import Header from '../../../components/layout/header/Header';
export interface HeaderContainerProps {
}
export default class HeaderContainer extends React.Component<HeaderContainerProps> {
public render() {
return <Header />
}
}
And finally the header:
import * as React from "react";
import { styled } from "#material-ui/core/styles";
import AppBar from "#material-ui/core/AppBar";
export default function Header() {
return (
<AppBar>
<h2>Hello</h2>
</AppBar>
)
}
I've tried putting the ThemeProvider in different components, but my h2 is still rendering as Times. Would be great if someone could spot the issue. Thanks
Checking the documents of material-ui it turns out you have imported some of the things from library in a wrong way. Like the docs state -
import { useTheme } from '#material-ui/core/styles';
import { createMuiTheme } from '#material-ui/core/styles';
Which can basically be
import { useTheme, createMuiTheme } from '#material-ui/core/styles';
Same goes for ThemeProvider
import { ThemeProvider } from '#material-ui/core/styles';
In MUI V5 you need to import ThemeProvider and createTheme from #mui/material/styles instead of #mui/styles.
import * as React from 'react';
import ReactDOM from 'react-dom';
import {red} from '#mui/material/colors';
import { ThemeProvider, createTheme } from '#mui/material/styles';
const theme = createTheme({
palette: {
primary: {
main: red[500],
},
},
});
function App() {
return <ThemeProvider theme={theme}>...</ThemeProvider>;
}
ReactDOM.render(<App />, document.querySelector('#app'));
source
I'm using create react app and I need to assign props values to a styles of the component. In this case background image 'url' is need to pass as props to styles.
index.js
import React from "react";
import ReactDOM from "react-dom";
import Background from "./background";
import "./styles.css";
function App() {
return (
<div className="App">
<Background source="./assets/image.jpg" />
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
background.js
import React from "react";
const styles = {
backgroundImage: "url()"
};
export default class Background extends React.Component {
render() {
return <div style={styles.background} />;
}
}
Find the code on below link:
codcodesandbox example
you can create style object and update the component style prop with it like so:
render() {
const style = {
backgroundImage:`url(${this.props.image})`
}
return <div style={style} />;
}
check this code update