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
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 try to import createGlobalStyle from styled-components but it does not seem to be working. I installed styled-components npm package, the version is #3.4.10.
const GlobalStyle = createGlobalStyle`
html {
height: 100%
}
* {
padding: 0;
margin: 0
}
`
export default GlobalStyle
The above code is where I am trying to import createGlobalStyle
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import GlobalStyle from './theme/globalStyles'
ReactDOM.render(
<React.StrictMode>
<App />
<GlobalStyle />
</React.StrictMode>,
document.getElementById('root')
)
And this is the index.js file where I am using the GlobalStyle component.
After running the code I am getting the following error:
./src/theme/globalStyles.js
Attempted import error: 'createGlobalStyle' is not exported from 'styled-components'.
Any help would be highly appreciated
If you're using styled-components version 3.4.10, then you have to use injectGlobal instead of createGlobalStyle, because createGlobalStyle was only release in v4 of styled-components. Check it out: [Deprecated] injectGlobal
So, in order for your code to work, you have to change a few things:
import { injectGlobal } from 'styled-components';
const GlobalStyle = injectGlobal`
html {
height: 100%
}
* {
padding: 0;
margin: 0
}
`
export default GlobalStyle
And in your index.ts
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import GlobalStyle from './theme/globalStyles'
ReactDOM.render(
<React.StrictMode>
<GlobalStyle /> // this comes first
<App />
</React.StrictMode>,
document.getElementById('root')
)
I have this code that doesn't render the image.
import styled from 'styled-components';
import ImageDiv from '../../shared/Image-div';
import { sideimage, signin } from '../../../assets/images';
import device from '../../../config/device';
const LogoDiv = styled(ImageDiv)`
background-image: url(${signin});
#media ${device.mobileS} {
background-image: url(${sideimage});
}
`;
export default LogoDiv;
Rendered code:
import React from 'react';
import { sideimage } from '../../../assets/images';
import SignUpButton from './sign-up-button';
import Input from '../../shared/Input-field';
import LogoDiv from '../../shared/Image-div';
import FormDiv from '../../shared/Sign-in-div';
import { NunitoItalic18, Nunito20 } from '../../shared/nunito/nunito';
import ImageContainer from '../../shared/image-container';
import ScreenDiv from '../../shared/screen-div';
type Props = {
setDisplayScreen: Function,
};
const marginInputPercentage = '4.3%';
const marginTopPercentage = '12.3%';
const buttonMarginPercentage = '6.7%';
const SignIn = ({ setDisplayScreen }: Props) => (
<ScreenDiv>
<ImageContainer>
<LogoDiv />
</ImageContainer>
);
export default SignIn;
This is the code base being used for the assignment.
Code for assets/images
import logo from './qiisologo/qiiso.png';
import signup from './signup/signup.png';
import signin from './signin/signin.jpg';
import sideimage from './signin/sideimage.jpg';
export { logo, signup, signin, sideimage };
Am I using a wrong syntax, because the image doesn't render? Thank you.
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
It's my error:
And it's my component:
import React from 'react';
import { render } from 'react-dom';
import './index.css';
import { Provider } from 'react-redux';
import { store } from './_helpers';
import {App} from './App';
render(
<Provider store={store}>
<App/>
</Provider>,
document.getElementById('root')
);
It's my store i export and import it to App.js
import { createStore, combineReducers } from 'redux';
import { reducer as reduxFormReducer } from 'redux-form';
const reducer = combineReducers({
form: reduxFormReducer, // mounted under "form"
});
const store = (window.devToolsExtension
? window.devToolsExtension()(createStore)
: createStore)(reducer);
export default store;
Where should i add store with Provider to works well?
I change structure of store and now it's working:
import { createStore, applyMiddleware } from 'redux';
import thunkMiddleware from 'redux-thunk';
import { createLogger } from 'redux-logger';
import rootReducer from '../_reducers';
import { composeWithDevTools } from 'redux-devtools-extension';
const loggerMiddleware = createLogger();
export const store = createStore(
rootReducer,
composeWithDevTools(
applyMiddleware(
thunkMiddleware,
loggerMiddleware
)
));
As you are exporting store as default you have to import it without courly braces as follow:
import store from './_helpers';
Hope it helps.