We Keep Coding

Using custom styles from theme in material ui without makeStyles

I'm wondering if there is a way to access theme.customElements.acitonButton in MyComponent without having to use makeStyles? For example, can I somehow enter className={theme.customElements.actionButton}?
theme.js
const theme = createMuiTheme({
customElements: {
actionButton: {
backgroundColor: '#007AFF'
}
}
})
export default theme
MyComponent.tsx
import { makeStyles, createStyles, Theme } from '#material-ui/core'
// wondering if i can remove makeStyles and somehow access styles set in theme.js and add to <IconButton />?
const useStyles: any = makeStyles((theme: Theme) => {
return createStyles({
actionButton: theme.customElements.actionButton
})
})
const MyComponent: React.FunctionComponent<MyComponentProps> = props => {
const classes = useStyles()
<IconButton className={classes.actionButton} />
}

You can override the style of a Component or Element in the theme.
To do that, you need to create the a folder called overrides in theme folder and create a file with the same name as the component whose theme you want to override.
Then you can change the component style like this.
export default {
elevation1: {
boxShadow: '0 0 0 1px rgba(63,63,68,0.05), 0 1px 3px 0 rgba(63,63,68,0.15)'
}
};
Also you need to add the theme provider to App.js.
import React from 'react';
import ThemeProvider from '#material-ui/styles/ThemeProvider';
import CssBaseline from '#material-ui/core/CssBaseline';
import {darkBlueTheme} from './theme';
import Routes from './Routes';
function App() {
return (
<StateProvider reducer={appReducer} initialState={getInitialState()}>
<ThemeProvider theme={darkBlueTheme}>
App CODE HERE
</ThemeProvider>
</StateProvider>
);
}
export default App;

React.js: How to implement dark/light mode in body toggling with useContext?

I am trying to create a background theme which will switch on onClick. On onClick it must change the background color of body in react app. I've managed to implement useContext, and now it toggles and changes the list items color in Header component. How to set it to body as well? Any help will be appreciated.
Here is my useContext color component
import React from 'react'
export const themes = {
light: {
foreground: '#ffffff',
},
blue: {
foreground: 'blue',
},
}
export default React.createContext({
theme: themes.light,
switchTheme: () => {},
})
onClick Button component
import React, { useContext } from 'react'
import ThemeContext from './context'
import './ThemedButton.scss'
const ThemedButton = () => {
const { switchTheme } = useContext(ThemeContext)
return (
<>
<button className="btn" onClick={switchTheme}>
Switch
</button>
</>
)
}
export default ThemedButton
App.js
import React, { useState } from 'react'
import SearchBar from './components/SearchBar';
import useCountries from './Hooks/useCountries';
import MainTable from './components/MainTable';
import ThemeButton from './useContext/ThemedButton';
import ThemeContext from './useContext/context';
import { searchProps } from './types';
import { themes } from './useContext/context';
import Routes from './Routes';
import './App.scss'
export default function App() {
const [search, setSearch] = useState('')
const [data] = useCountries(search)
const [context, setContext] = useState({
theme: themes.light,
switchTheme: () => {
setContext((current) => ({
...current,
theme: current.theme === themes.light ? themes.blue : themes.light,
}))
},
})
const handleChange: React.ReactEventHandler<HTMLInputElement> = (e): void => {
setSearch(e.currentTarget.value)
}
return (
<div className="App">
<SearchBar handleChange={handleChange} search={search as searchProps} />
<ThemeContext.Provider value={context}>
<ThemeButton />
<MainTable countries={data} />
</ThemeContext.Provider>
<Routes />
</div>
)
}
Header component
import React, { useContext } from 'react'
import ThemeContext from '../../useContext/context'
import './Header.scss'
export default function Header() {
const { theme } = useContext(ThemeContext)
return (
<div className="header">
<ul className="HeadtableRow" style={{ color: theme.foreground }}> // here it's set to change list items color
<li>Flag</li>
<li>Name</li>
<li>Language</li>
<li>Population</li>
<li>Region</li>
</ul>
</div>
)
}

If you want to change your body tag in your application you need to modify DOM and you can add this code to your Header.js (or any other file under your context) file:
useEffect(() => {
const body = document.getElementsByTagName("body");
body[0].style.backgroundColor = theme.foreground
},[])
*** Don't forget to import useEffect
*** Inline style like below is a better approach than modifying DOM directly
<div className="App" style={{backgroundColor: context.theme.foreground}}>
//For under context files just use theme.foreground
<SearchBar handleChange={handleChange} search={search as searchProps} />
<ThemeContext.Provider value={context}>
<ThemeButton />
<MainTable countries={data} />
</ThemeContext.Provider>
<Routes />
</div>

Material-UI AppBar click is not working in react

I'm trying some things in react. I'm rendering the AppBar and the Drawer from v0 Material-UI as functional components. I have added the handleDrawerClick function in the class and sending the function as a props to use as a click function in the functional component. But the click function is not working. The problem here is wrapping up the function as the param and passing it as props might not be working. If there's any other way to achieve the click any help would be appreciated but we need to make sure that we're using the fancy components in the functional components and rendering those in the class just like shown in the Demo. onLeftIconButtonClick, the drawer open and closing needs to get controlled.
I have added one working demo here through stackblitz => Working Demo
Here's my code:
import React, { Component } from 'react';
import { render } from 'react-dom';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import darkBaseTheme from 'material-ui/styles/baseThemes/darkBaseTheme';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import AppBar from 'material-ui/AppBar';
import Drawer from 'material-ui/Drawer';
import MenuItem from 'material-ui/MenuItem';
import './style.css';
export const getMenuBar = (isBarOpened) => {
return(
<Drawer open={isBarOpened}>
<MenuItem>Menu Item</MenuItem>
<MenuItem>Menu Item 2</MenuItem>
</Drawer>
);
}
export const getAppBar = (handleDrawerClick) => {
return(
<AppBar
title="My AppBar"
className="st_appBarClass"
titleStyle={{ color: "#FFFFFF" }}
onLeftIconButtonClick={handleDrawerClick()}
/>
);
}
class App extends Component {
constructor() {
super();
this.state = {
name: 'React',
isMenuOpened: false
};
}
handleDrawerClick = (e) => {
console.log(e);
if(e) {
this.setState({ isMenuOpened: !this.state.isMenuOpened });
}
}
render() {
return (
<MuiThemeProvider muiTheme={getMuiTheme(darkBaseTheme)}>
<div className='product-list-wrapper'>
{/*<ProductList products={products} />*/}
{getAppBar(this.handleDrawerClick)}
{getMenuBar(this.state.isMenuOpened)}
</div>
</MuiThemeProvider>
)
}
}
render(<App />, document.getElementById('root'));

export const getAppBar = (handleDrawerClick) => {
return(
<AppBar
title="My AppBar"
className="st_appBarClass"
titleStyle={{ color: "#FFFFFF" }}
onLeftIconButtonClick={handleDrawerClick} //Remove ()
/>
);
}

To open menu remove unnecessary round brackets
<AppBar
title="My AppBar"
className="st_appBarClass"
titleStyle={{ color: "#FFFFFF" }}
onLeftIconButtonClick={handleDrawerClick}//<---here
/>
To close menu provide an onClick to the parent div
<div onClick={this.handleDrawerClick} className='product-list-wrapper'> //<----here
{/*<ProductList products={products} />*/}
{getAppBar(this.handleDrawerClick)}
{getMenuBar(this.state.isMenuOpened)}
</div>

React Material UI : 'theme' is not defined no-undef

I am creating a simple react application using material-ui. I am using MuiThemeProvider and ThemeProvider for theme.
App.js
import React from 'react';
import { createMuiTheme, MuiThemeProvider } from '#material-ui/core/styles';
import { ThemeProvider } from '#material-ui/styles';
import { CssBaseline } from '#material-ui/core';
import { Topic } from './dashboard/components/drawer/topic.js'
const theme = createMuiTheme({
palette : {
type : 'dark',
background : {
default : "#000000"
},
secondary : {
main : '#E19A4C'
}
}
})
function App() {
return (
< MuiThemeProvider theme={theme}>
<ThemeProvider theme={theme}>
<CssBaseline />
<div className="App">
<Dashboard />
<Topic />
</div>
</ThemeProvider>
</ MuiThemeProvider>
);
}
export default App;
Topic.js
import React, { Component } from 'react';
import { Typography, makeStyles, Box, Paper } from '#material-ui/core';
const style = makeStyles(theme => ({
paper : {
background : '#ff00ff'
}
}))
export const Topic = (props) => {
const classes = style()
return (
<div>
<Paper className={classes.box}>
<Typography variant="h6" component="h6" gutterBottom>
{props.data}
</Typography>
</Paper>
</div>
)
}
export default Topic
I am getting error Uncaught ReferenceError: theme is not defined
I have tried { withTheme : true } in makeStyles but it doesn't work.
Sending theme as props works but is not recommended.
Can Someone please help?

In your Topic.js file try using useTheme hook like this:
import React, { Component } from 'react';
import { Typography, makeStyles, Box, Paper } from '#material-ui/core';
import { useTheme } from '#material-ui/core/styles';
const style = makeStyles(theme => ({
paper : {
background : '#ff00ff'
}
}))
export const Topic = (props) => {
const classes = style()
const theme = useTheme();
return (
<div>
<Paper className={classes.box}>
<Typography variant="h6" component="h6" gutterBottom>
{props.data}
</Typography>
</Paper>
</div>
)
}
export default Topic
Now you can access the theme you created in App.js from theme variable(e.g const theme)

How to use useStyle to style Class Component in Material Ui

I want to use useStyle to style the Class Component . But this can be easily done hooks. but i want to use Component instead. But I cant figure out how to do this.
import React,{Component} from 'react';
import Avatar from '#material-ui/core/Avatar';
import { makeStyles } from '#material-ui/core/styles';
import LockOutlinedIcon from '#material-ui/icons/LockOutlined';
const useStyles = makeStyles(theme => ({
'#global': {
body: {
backgroundColor: theme.palette.common.white,
},
},
paper: {
marginTop: theme.spacing(8),
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
},
avatar: {
margin: theme.spacing(1),
backgroundColor: theme.palette.secondary.main,
}
}));
class SignIn extends Component{
const classes = useStyle(); // how to assign UseStyle
render(){
return(
<div className={classes.paper}>
<Avatar className={classes.avatar}>
<LockOutlinedIcon />
</Avatar>
</div>
}
}
export default SignIn;

You can do it like this:
import { withStyles } from "#material-ui/core/styles";
const styles = theme => ({
root: {
backgroundColor: "red"
}
});
class ClassComponent extends Component {
state = {
searchNodes: ""
};
render() {
const { classes } = this.props;
return (
<div className={classes.root}>Hello!</div>
);
}
}
export default withStyles(styles, { withTheme: true })(ClassComponent);
Just ignore the withTheme: true if you aren't using a theme.
To get this working in TypeScript, a few changes are needed:
import { createStyles, withStyles, WithStyles } from "#material-ui/core/styles";
const styles = theme => createStyles({
root: {
backgroundColor: "red"
}
});
interface Props extends WithStyles<typeof styles>{ }
class ClassComponent extends Component<Props> {
// the rest of the code stays the same

for class Components you can use withStyles instead of makeStyles
import { withStyles } from '#material-ui/core/styles';
const useStyles = theme => ({
fab: {
position: 'fixed',
bottom: theme.spacing(2),
right: theme.spacing(2),
},
});
class ClassComponent extends Component {
render() {
const { classes } = this.props;
{/** your UI components... */}
}
}
export default withStyles(useStyles)(ClassComponent)

Hey I had a similar problem. I solved it by replacing makeStyles with withStyles and then at the point where do something like const classes = useStyle();, replace that with const classes = useStyle;
You notice useStyle is not supposed to be a function call but rather a variable assignment.
That should work fine after you've made those changes.

useStyles is a react hook. You can use it in function component only.
This line creates the hook:
const useStyles = makeStyles(theme => ({ /* ... */ });
You are using it inside the function component to create classes object:
const classes = useStyles();
Then in jsx you use classes:
<div className={classes.paper}>
Suggested resources:
https://material-ui.com/styles/basics/
https://reactjs.org/docs/hooks-intro.html

Like other answers already stated you should use withStyles to augment a component and pass the classes through the properties. I've taken the liberty to modify the Material-UI stress test example into a variant that uses a class component.
Note that the withTheme: true option is normally not needed when you simply want to use the styles. It is needed in this example because the actual value of the theme is used in the render. Setting this option makes theme available through the class properties. The classes prop should always be provided, even if this option is not set.
const useStyles = MaterialUI.withStyles((theme) => ({
root: (props) => ({
backgroundColor: props.backgroundColor,
color: theme.color,
}),
}), {withTheme: true});
const Component = useStyles(class extends React.Component {
rendered = 0;
render() {
const {classes, theme, backgroundColor} = this.props;
return (
<div className={classes.root}>
rendered {++this.rendered} times
<br />
color: {theme.color}
<br />
backgroundColor: {backgroundColor}
</div>
);
}
});
function StressTest() {
const [color, setColor] = React.useState('#8824bb');
const [backgroundColor, setBackgroundColor] = React.useState('#eae2ad');
const theme = React.useMemo(() => ({ color }), [color]);
const valueTo = setter => event => setter(event.target.value);
return (
<MaterialUI.ThemeProvider theme={theme}>
<div>
<fieldset>
<div>
<label htmlFor="color">theme color: </label>
<input
id="color"
type="color"
onChange={valueTo(setColor)}
value={color}
/>
</div>
<div>
<label htmlFor="background-color">background-color property: </label>
<input
id="background-color"
type="color"
onChange={valueTo(setBackgroundColor)}
value={backgroundColor}
/>
</div>
</fieldset>
<Component backgroundColor={backgroundColor} />
</div>
</MaterialUI.ThemeProvider>
);
}
ReactDOM.render(<StressTest />, document.querySelector("#root"));
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<script src="https://unpkg.com/react#16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/#material-ui/core#4/umd/material-ui.production.min.js"></script>
<div id="root"></div>

Yet another way to do this, albeit a bit of a workaround.
Some may say this doesn't really answer the question, but I would argue that it does. The end result is useStyles() delivers the styling for a class-based yet multi-part parent component.
In my case I needed a standard Javascript class export so that I could call new MyClass() without a MyClass is not a constructor error.
import { Component } from "./react";
import { makeStyles } from "#material-ui/core/styles";
const useStyles = makeStyles((theme) => ({
someClassName: {
...
}
}));
export default class MyComponent extends Component {
render() {
return <RenderComponent {...this.props} />;
}
}
function RenderComponent(props) {
const classes = useStyles();
return (
/* JSX here */
);
}

how to add multiple classes in ClassName with class component
import { withStyles } from "#material-ui/core/styles";
const styles = theme => ({
root: {
backgroundColor: "red"
},
label: {
backGroundColor:"blue"
}
});
class ClassComponent extends Component {
state = {
searchNodes: ""
};
render() {
const { classes } = this.props;//
return (
<div className={classes.root + classes.label}>Hello!</div> //i want to add label style also with
);
}
}