Wouldn't be possible to use [props => props.theme.breakpoints.up('sm')] ?
import React from 'react';
import { styled, withTheme } from '#material-ui/core';
export const DefaultContent = withTheme(
styled(({ theme, ...other }) => <main {...other} />)({
flexGrow: 1,
padding: props => props.theme.spacing(1),
backgroundColor: 'red',
[props => props.theme.breakpoints.up('sm')]: {
backgroundColor: 'blue',
},
})
);
You don't need functions when using theme properties - it kind of looks like you're mixing backtick syntax (where you would see props passed in a function on each line) rather than object syntax. This works:
const DefaultContent = styled('main')(({ theme }) => ({
flexGrow: 1,
padding: theme.spacing(1),
backgroundColor: 'red',
[theme.breakpoints.up('sm')]: {
backgroundColor: 'blue'
}
}));
Related
I am a React newbie. Using Material-UI / React, how can I create my own Button component? Ideally, I would like the component to encapsulate certain properties.
Here is my code.
export const Button = withSytles((theme) => ({
root: {
backgroundColor: theme.palette.primary.main,
minWidth: '100px',
}
}))(MaterialButton);
This code is working however, is there a way to have the component employ all of the properties when I use color="primary" to the Material-UI Button. Do I need to include ALL of the properties or is there an easier way.
Also, I am sure using 100px is not the correct way for this control to be responsive. Is 100em correct or should I use something different?
This is possible in Material-UI v5, you can create a custom variant for your Button. A variant is just a specific styles of a component, each variant is identified by a set of component props. See the example below:
const defaultTheme = createMuiTheme();
const theme = createMuiTheme({
components: {
MuiButton: {
variants: [
{
props: { color: "primary", variant: "contained" },
style: {
backgroundColor: defaultTheme.palette.primary.main,
fontSize: 20,
minWidth: "200px"
}
},
{
props: { color: "secondary", variant: "contained" },
style: {
backgroundColor: defaultTheme.palette.secondary.main
}
}
]
}
}
});
When you render this component:
<Button color="primary" variant="contained">
Primary
</Button>
The first variant style specified above is used because they have the same props:
{ color: "primary", variant: "contained" }
Live Demo
You can create custom variant as mentioned by #NearHuscarl other way you can create component modifying style.
Something like.
import { makeStyles } from '#material-ui/core/styles'
import Button from '#material-ui/core/Button'
import PropTypes from 'prop-types'
const useStyles = makeStyles((theme) => ({
root: {
height: '48px',
width: '100%',
backgroundColor: '#232323',
color: '#fff',
fontSize: '16px',
borderRadius: '4',
minHeight: theme.spacing(6),
'&:hover, &:active, &:focus': {
backgroundColor: `rgba(0, 0, 0, 0.8)`,
},
'&.Mui-disabled': {
opacity: 0.75,
},
},
}))
const propTypes = {
loading: PropTypes.bool,
}
function PrimaryButton({ children, loading = false, ...props }) {
const classes = useStyles()
return (
<Button
variant="contained"
className={classes.root}
disabled={loading}
{...props}
>
{children}
</Button>
)
}
PrimaryButton.propTypes = propTypes
export default PrimaryButton
Created code sandbox
https://codesandbox.io/embed/boring-mayer-cjl0f?fontsize=14&hidenavigation=1&theme=dark
//Component Style:
const BorderLinearProgress = withStyles(theme => ({
bar: {
borderRadius: 8,
backgroundColor: "red"
}
}))(LinearProgress);
//Component use:
<BorderLinearProgress variant="determinate" value={50} />
I am new to react and material-ui.
In the above code I need to pass or change bar:backgroundColor dynamically.
Please let me know what are the options to do.
Thanks in advance
You can pass your color with the theme variable.
// Passing theme
const useStyles = makeStyles((theme) => ({
bar: props => ({
borderRadius: 8,
backgroundColor: props.color
})
}))
//Using style in component
...
const [progressColor, setProgressColor] = React.useState({ color: 'red' })
const classes = useStyles(progressColor);
// Update color based on your requirements i.e. setProgressColor({color: 'green'}) in some useEffect() when progress crosses some threshold
return (
<LinearProgress color={classes.bar} />
)
...
You can find an example in official docs: https://material-ui.com/styles/basics/#adapting-based-on-props
Below code works fine with dynamic values and colors
const LinearProgressBar: React.FC<ILinearProps> = ({ value, color }) => {
const useStyles = makeStyles({
root: {
height: 10,
borderRadius: 5
},
colorPrimary: {
backgroundColor: '#E9E9E9'
},
bar: {
borderRadius: 5,
backgroundColor: color
}
});
const classes = useStyles();
return (
<LinearProgress
variant="determinate"
value={value}
classes={{
root: classes.root,
colorPrimary: classes.colorPrimary,
bar: classes.bar
}}
/>
);
};
export default LinearProgressBar;
You can do it in two ways:
1). just Write
<LinearProgress style={{backgroundColor: "red"}} variant="determinate" value={50} />
2).
import React from 'react';
import { withStyles } from '#material-ui/core/styles';
const styles = {
LinerProgressColor: {
backgroundColor: 'red',
},
};
function BorderLinearProgress (props) {
return <LinearProgress className={LinerProgressColor} variant="determinate" value={50} />;
}
export default withStyles(styles)(BorderLinearProgress);
How do I write makeStyles() so that it allows me to use both theme variables and props?
I've tried this:
const useStyles = makeStyles(theme => ({
appbar: props => ({
boxShadow: "none",
background: "transparent",
marginTop: theme.spacing(2),
marginBottom: theme.spacing(2),
color: theme.palette.getContrastText(props)
}),
}));
And called it in the component with:
const classes = useStyles(backgroundColor);
Where backgroundColor is a prop on the component with type CSSProperties["backgroundColor"]
But I'm getting the error:
TypeError: Cannot read property 'rules' of undefined
at RuleList.onUpdate (C:\Users\...\node_modules\jss\dist\jss.cjs.js:944:14)
at RuleList.update (C:\Users\...\node_modules\jss\dist\jss.cjs.js:923:12)
at StyleSheet.update (C:\Users\...\node_modules\jss\dist\jss.cjs.js:1178:39)
at attach (C:\Users\...\node_modules\#material-ui\styles\makeStyles\makeStyles.js:141:18)
at C:\Users\...\node_modules\#material-ui\styles\makeStyles\makeStyles.js:262:7
at useSynchronousEffect (C:\Users\...\node_modules\#material-ui\styles\makeStyles\makeStyles.js:207:14)
at C:\Users\...\node_modules\#material-ui\styles\makeStyles\makeStyles.js:254:5
at Layout (C:\Users\...\.next\server\static\development\pages\index.js:1698:17)
at processChild (C:\Users\...\node_modules\react-dom\cjs\react-dom-server.node.development.js:2888:14)
at resolve (C:\Users\...\node_modules\react-dom\cjs\react-dom-server.node.development.js:2812:5)
at ReactDOMServerRenderer.render (C:\Users\...\node_modules\react-dom\cjs\react-dom-server.node.development.js:3202:22)
at ReactDOMServerRenderer.read (C:\Users\...\node_modules\react-dom\cjs\react-dom-server.node.development.js:3161:29)
at renderToString (C:\Users\...\node_modules\react-dom\cjs\react-dom-server.node.development.js:3646:27)
at render (C:\Users\...\node_modules\next-server\dist\server\render.js:86:16)
at renderPage (C:\Users\...\node_modules\next-server\dist\server\render.js:211:20)
at ctx.renderPage (C:\Users\...\.next\server\static\development\pages\_document.js:2404:22)
100 | handleSignUpClick,
101 | backgroundColor
102 | }) => {
> 103 | const classes = useStyles(backgroundColor);
104 | return (
105 | <AppBar className={classes.appbar}>
106 | <Container maxWidth="lg">
edit: I'm using version 4.0.0-beta.1 of material core and styles
Tested with:
"#material-ui/core": "^4.0.0-beta.1",
"#material-ui/styles": "^4.0.0-rc.0",
JavaScript example:
my-component.js
import React from 'react';
import { makeStyles } from '#material-ui/styles';
import { useStyles } from './my-component.styles.js';
const myComponent = (props) => {
const styleProps = { width: '100px', height: '100px' };
const classes = useStyles(styleProps);
return (
<div className={classes.mySelector}></div> // with 100px and height 100px will be applied
)
}
my-component.styles.js
export const useStyles = makeStyles(theme => ({
mySelector: props => ({
display: 'block',
width: props.width,
height: props.height,
}),
}));
TypeScript example:
my-component.ts
import React, { FC } from 'react';
import { makeStyles } from '#material-ui/styles';
import { useStyles } from './my-component.styles.ts';
import { MyComponentProps, StylesProps } from './my-component.interfaces.ts';
const myComponent: FC<MyComponentProps> = (props) => {
const styleProps: StylesProps = { width: '100px', height: '100px' };
const classes = useStyles(styleProps);
return (
<div className={classes.mySelector}></div> // with 100px and height 100px will be applied
)
}
my-component.interfaces.ts
export interface StyleProps {
width: string;
height: string;
}
export interface MyComponentProps {
}
my-component.styles.ts
import { Theme } from '#material-ui/core';
import { makeStyles } from '#material-ui/styles';
import { StyleProps } from './my-components.interfaces.ts';
export const useStyles = makeStyles<Theme, StyleProps>((theme: Theme) => ({
mySelector: props => ({ // props = { width: string; height: string }
display: 'block',
width: props.width,
height: props.height,
}),
}));
Update
Re-tested with
"#material-ui/core": "^4.12.X"
You need to pass an object to useStyles rather than a string.
So instead of:
const classes = useStyles(backgroundColor);
you should have:
const classes = useStyles(props);
or
const classes = useStyles({backgroundColor});
Then you can get at backgroundColor using:
color: theme.palette.getContrastText(props.backgroundColor).
Here's a working example:
https://codesandbox.io/s/o7xryjnmly
You can do this: (i dont know if is the best way but works... also can access to the theme ang globals provider (using themeProvider))
import { makeStyles }from '#material-ui/core/styles'
import styles from './styles';
const useStyles = makeStyles(theme => (styles(theme))); // here call styles function imported from styles.js
const SideNav = ({drawerState, toggleDrawer}) => {
const classes = useStyles();
return (
<Box className={classes.root}>
<Drawer className="drawer" anchor="left" open={drawerState} onClose={() => toggleDrawer(false)}>
<NavList></NavList>
</Drawer>
</Box>
);
export default SideNav;
and in styles.js
const styles = (theme) => {
return ({
root: {
'& .drawer': {
backgroundColor:'red'
}
}
});
}
export default styles;
makeStyles get the theme by params
so you can create a styles.js for every component with a arrow function inside and
calling from makeStyles that can access to the theme provider.
We have 2 modes in general, your prop variable is imported to the component or not.
If your prop variable is imported, it is a global variable, so it is valid in makeStyles():
import {prop} from ...
const useStyles = makeStyles((theme) => ({
className:{
// use prop
}
})
define component...
If your prop variable is defined in the component (such as a state), you have 2 choices:
You can pass the prop variable to makeStyles():
const useStyles = makeStyles((theme,prop) => ({
className:{
// use prop
}
})
define component...
You can use arrow function without passing any argument (except theme) to makeStyles():
const useStyles = makeStyles((theme) => ({
className:(prop)=>({
//use prop
})
})
define component...
Here is an example of how you can use only props or props and theme both with makeStyles() just like styled-components
component.js
import { tableCellStyling } from './component.styled.js';
const RenderRow = (props) => {
const { noPaddingTopBottom } = tableCellStyling(props);
return(
<StyledTableRow>
{data.map( (row,i) => (
<StyledTableCell className={noPaddingTopBottom}>
{row.data}
</StyledTableCell>
)}
</StyledTableRow>
)
};
Assuming my props object which is being passed by RenderRow Component to tableCellStyling has { color: 'grey', thinRow: true } in it
component.styled.js
import { makeStyles } from '#material-ui/core/styles';
export const tableCellStyling = makeStyles(theme => ({
noPaddingTopBottom: {
borderBottom: ({ color }) => color ? `2px solid ${color}` : '2px solid red',
paddingBottom: props => props.hasActions && 0,
paddingTop: props => props.hasActions && 0,
backgroundColor: theme.palette.common.white,
},
}));
The way you can do it is like this:
import { makeStyles, createStyles, Theme } from "#material-ui/core/styles";
...
...
const classes = useStyles();
...
...
const useStyles = makeStyles((theme: Theme) =>
createStyles({
root: propName => ({
border: "none",
boxShadow: "none",
cursor: propName ? "pointer" : "auto",
width: "100%",
backgroundColor: "#fff",
padding: "15px 15px"
}),
updated: {
marginTop: 12,
fontWeight: 400,
color: "#939393"
}
})
);
You can use the prop name inside the element you are styling by making it an arrow function that returns the styling. In addition, you can also style other elements inside the createStyles hook. This took me some time, I hope anyone finds it useful. ✨🔥
Is there a way to use variables in my React components using Material UI and withStyles? How can replace the repeated '20px' in the styles const below with a variable? Is this possible?
import React, { Component } from 'react';
import { withStyles } from '#material-ui/core/styles';
import Topnav from '../component/Topnav';
import Footer from '../component/Footer';
const styles = {
root: {
flexGrow: 1,
},
grow: {
flexGrow: 1,
},
margin: {
marginLeft: '20px',
marginRight: '20px',
marginTop: '20px',
}
};
class MainLayoutComp extends Component {
render = props => {
const { children, classes } = this.props;
return (
<>
<Topnav />
<div className={classes.margin}>
{children}
<Footer />
</div>
</>
);
}
}
const MainLayout = withStyles(styles)(MainLayoutComp);
export default MainLayout;
The answer below is specific to this question of replacing repeated values in the styles, but may not be what most people are looking for based on the title of the question. If you are wanting dynamic styles based on props, see the following questions:
How to allow customization of a React component's style via props, when withStyles api is used?
Send Variable to withStyles in Material UI?
It's just JavaScript, so you can do the following:
const myMargin = '20px';
const styles = {
root: {
flexGrow: 1,
},
grow: {
flexGrow: 1,
},
margin: {
marginLeft: myMargin,
marginRight: myMargin,
marginTop: myMargin,
}
};
Also, you can easily leverage your theme by using a function for the styles. withStyles will pass the theme as an argument:
const styles = (theme) => ({
root: {
flexGrow: 1,
},
grow: {
flexGrow: 1,
},
margin: {
marginLeft: theme.spacing.unit * 3,
marginRight: theme.spacing.unit * 3,
marginTop: theme.spacing.unit * 3,
}
});
Here's a working example showing both:
I'm trying to customize the design (borders, radius border) of the drop-down element of the MUI Select component.
The MUI documentation mentions various properties to override and style the various sub-components, but none for the drop-down itself. The reason for it might be that the drop down renders out of the root component, with position absolute relative to the page.
Any idea how I can style the dropdown?
Here is a screenshot of the current state of the component:
I was able to customize the design of the input element of the MUI Select component
Material-UI v4
You can do that in two different ways:
1. At global level
This way all the menus in the application will get the style.
First you need to create a theme.js file:
'use strict';
import { createMuiTheme } from '#material-ui/core/styles';
const theme = createMuiTheme({
overrides: {
// Applied to the <ul> element
MuiMenu: {
list: {
backgroundColor: "#cccccc",
},
},
// Applied to the <li> elements
MuiMenuItem: {
root: {
fontSize: 12,
},
},
},
});
export default theme;
Then import it in your main application component, so it will be applied to all the application components:
'use strict';
import React from "react";
import { ThemeProvider } from '#material-ui/styles';
import CssBaseline from '#material-ui/core/CssBaseline';
import theme from 'theme.js';
export default class App extends React.Component {
render() {
return (
<ThemeProvider theme={theme}>
<CssBaseline />
{/* Your app content */}
</ThemeProvider>
);
}
}
2. At component level
With this approach you can define a different menu style for each component.
'use strict';
import React from "react";
import { makeStyles } from '#material-ui/core/styles';
import Select from "#material-ui/core/Select";
const useStyles = makeStyles({
select: {
"& ul": {
backgroundColor: "#cccccc",
},
"& li": {
fontSize: 12,
},
},
});
export default class MyComponent extends React.Component {
const classes = useStyles();
render() {
return (
<Select MenuProps={{ classes: { paper: classes.select } }} />
);
}
}
You can use the sx prop in MUI v5 to style the Paper which contains a list of MenuItem inside like this:
<Select
fullWidth
value={age}
onChange={handleChange}
MenuProps={{
PaperProps: {
sx: {
bgcolor: 'pink',
'& .MuiMenuItem-root': {
padding: 2,
},
},
},
}}
>
Live Demo
For Material-ui version 0
Apply styles to dropdownMenuprops as stated here Select Properties
const dropdownMenuProps={
menuStyle:{
border: "1px solid black",
borderRadius: "5%",
backgroundColor: 'lightgrey',
},
}
Apply the style to select using dropdownmenuprops
<SelectField
multiple={true}
hintText="Overriden"
value={values}
onChange={this.handleChange}
dropDownMenuProps={dropdownMenuProps}
>
SandBox Demo using version 0.18
For Material-ui Version 1
Dropdown or menu styles are overriden using MenuProps property.
Select-API
Try this
const styles = theme => ({
dropdownStyle:
{
border: "1px solid black",
borderRadius: "5%",
backgroundColor:'lightgrey',
},
});
Apply the style to MenuProps
<Select
value={this.state.age}
onChange={this.handleChange}
inputProps={{
name: "age",
id: "age-simple"
}}
MenuProps={{ classes: { paper: classes.dropdownStyle } }}
>
I tried this in codesandbox and it works for me
Code Sandbox Demo
Read the API of Menu and Select for more details.
For anyone still looking for this in 2022:
MenuProps={{
sx: {
'& .MuiMenu-paper': {
backgroundColor: 'dark.primary',
color: 'text.light'
},
'& .MuiMenuItem-root:hover': {
backgroundColor: 'dark.secondary',
color: 'text.white'
},
'& .Mui-selected': {
backgroundColor: 'primary.main',
color: 'text.white'
}
}
}}
sx={{
color: '#fff',
'&.Mui-focused .MuiOutlinedInput-notchedOutline': {
borderColor: 'red',
},
'.MuiSvgIcon-root': {
color: '#fff'
},
'&:before': {
borderBottom: `1px solid ${DarkTheme.palette.primary.light}`
},
'&:hover': {
':before': {
borderBottom: `1px solid ${DarkTheme.palette.primary.dark}`
}
},
'& .MuiMenuItem-root': {
backgroundColor: 'dark.primary'
},
'& .MuiMenu-paper': {
backgroundColor: 'dark.primary'
}
}}