I have the background image on the header, but when I open it up the image continues to the body. Is there a way to have the expanded text not have the same background as the header? Thanks in advance!
const styles = theme => ({
expansion: {
backgroundImage: `url(${Tuesday})`,
width: "100%"
},
head: {
height: '84px'
},
text: {
color: 'white',
fontSize: '32px',
fontFamily: 'AvenirNext-Heavy'
},
body: {
backgroundImage: 'none'
}
});
const ExpandedMenu = (props) => {
const { classes } = props;
return(
<div>
<ExpansionPanel className={classes.expansion}>
<ExpansionPanelSummary className={classes.head} expandIcon={<ExpandMoreIcon />}>
<Typography className={classes.text}>TUESDAY</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails className={classes.body}>
<Typography className={classes.body}>
<p>example text</p>
</Typography>
</ExpansionPanelDetails>
</ExpansionPanel>
</div>
)
}
just give the backGroundImage to your .head class:
this sandbox is the one that #SumanKundu built and I changed it to satisfy your need.
You can simply add inline styles but as #TFischer said withStyles will be a better option.
You can go to this sandbox for a working example and check if it works for you:
https://codesandbox.io/s/03x2r4lw2w
Related
Have looked at other examples and trying to do the same thing but not sure why my code is not working. I have code which loops through some keys and renders a div. I want to conditionally apply some styles based on whether the key is even or odd. Example:
<div className={parseInt(key) % 2 === 0 ? 'label1' : 'label2' }>
<span style={{ marginLeft: "10px" }}>{key}:00</span>
</div>
The styles are accessible in the same file and look something like:
# Material UI
const useStyles = makeStyles((theme) => ({
label1: {
width: "50px",
height: "16px",
top: "458px",
background: "yellow",
fontSize: "12px",
},
label2: {
width: "50px",
height: "16px",
top: "458px",
background: "red",
fontSize: "12px",
},
}));
What am I doing wrong? Currently no style is getting applied to the div
You need to use the classes from the material ui useStyles hook.
const classes = useStyles()
....
<div className={parseInt(key) % 2 === 0 ? classes.label1 : classes.label2 }>
<span style={{ marginLeft: "10px" }}>{key}:00</span>
</div>
Check the useStyles hook api: https://material-ui.com/styles/basics/
If you have a class component and you can use hooks then you can do it with the withStyles higher order component, like this example:
import { withStyles } from "#material-ui/core/styles"
const styles = theme => ({
label1: {
backgroundColor: "red",
},
label2: {
backgroundColor: "red",
},
})
class ClassComponent extends Component {
state = {
searchNodes: "",
}
render() {
const { classes } = this.props
return (
<div className={parseInt(key) % 2 === 0 ? classes.label1 : classes.label2}>
<span style={{ marginLeft: "10px" }}>{key}:00</span>
</div>
)
}
}
export default withStyles(styles, { withTheme: true })(ClassComponent)
I wanted to change the background color of the drawer component in react but I always am only able to change the entire background behind the drawer the field with the items or nothing but not the entire white area. Here is my code:
const useStyles = makeStyles({
MuiDrawer: {
backgroundColor: "#5d001e",
},
list: {
width: 250,
},
linkText: {
textDecoration: `none`,
textTransform: `uppercase`,
color: `black`,
},
})
return (
<>
<React.Fragment>
<TheIconButton
edge="start"
aria-label="menu"
onClick={toggleDrawer("right", true)}>
<Menu />
</TheIconButton>
<Drawer anchor="right" open={state.right} onOpen={toggleDrawer("right", true)} onClose={toggleDrawer("right", false)} className={classes.MuiDrawer}>
{sideDrawerList("right")}
</Drawer>
</React.Fragment>
</>
)
Any ideas on how to target it ? I also tried forcing it with a class in a css file but it did not work....
Target the Drawer paper
const useStyles = makeStyles({
MuiDrawer: {
backgroundColor: "#5d001e"
}
});
<Drawer
classes={{paper: classes.MuiDrawer}}
>
I have a scrollbar in multiple lists in the React app.
My global CSS within Material-UI is:
MuiCssBaseline: {
...theme.overrides?.MuiCssBaseline,
'#global': {
'#font-face': fontFace,
'*::-webkit-scrollbar': {
width: '1.3%',
maxWidth: '5px'
},
'*::-webkit-scrollbar-thumb': {
backgroundColor: 'white'
},
'*:focus': {
outline: 'none'
}
}
}
};
I am trying to add global state for hover.
When I hover on the box(!) not on the scroll itself, the scrollbar should be changed to gray.
Let's say I have box like:
<Box className={listStyle.root}>
<AutoSizer>
{({ height, width }) => (
<List dense ......
return (
<ListItem
/>
);
})}
</List>
)}
</AutoSizer>
I tried something like the following and it's not working:
.listStyle:{
'&:hover':{
'*::-webkit-scrollbar-thumb': {
backgroundColor: 'gray'
},
}
}
How can I achieve that?
The primary issue I see is that when nesting a rule (e.g. ::-webkit-scrollbar-thumb pseudo-element within :hover pseudo-class), you need to use & to refer to the parent rule instead of using *. So your listStyle should look like:
.listStyle:{
'&:hover':{
'&::-webkit-scrollbar-thumb': {
backgroundColor: 'gray'
},
}
}
It would also be equivalent to do the following:
.listStyle:{
'&:hover::-webkit-scrollbar-thumb': {
backgroundColor: 'gray'
}
}
If you want to apply this globally, you can do something like the following (I've changed the colors just to make the effects more easily distinguishable from browser defaults):
const theme = createMuiTheme({
overrides: {
MuiCssBaseline: {
"#global": {
"*::-webkit-scrollbar": {
width: "1.3%",
maxWidth: "5px"
},
"*::-webkit-scrollbar-thumb": {
backgroundColor: "purple"
},
"*:hover": {
"&::-webkit-scrollbar-thumb": {
backgroundColor: "green"
}
}
/* Equivalent alternative:
"*:hover::-webkit-scrollbar-thumb": {
backgroundColor: "green"
}
*/
}
}
}
});
Here is a full example showing both the global approach and overriding that using a class name at a lower level:
import React from "react";
import CssBaseline from "#material-ui/core/CssBaseline";
import {
ThemeProvider,
createMuiTheme,
makeStyles
} from "#material-ui/core/styles";
const theme = createMuiTheme({
overrides: {
MuiCssBaseline: {
"#global": {
"*::-webkit-scrollbar": {
width: "1.3%",
maxWidth: "5px"
},
"*::-webkit-scrollbar-thumb": {
backgroundColor: "purple"
},
"*:hover": {
"&::-webkit-scrollbar-thumb": {
backgroundColor: "green"
}
}
/* Equivalent alternative:
"*:hover::-webkit-scrollbar-thumb": {
backgroundColor: "green"
}
*/
}
}
}
});
const useStyles = makeStyles({
divStyle: {
"&:hover::-webkit-scrollbar-thumb": {
backgroundColor: "red"
}
}
});
export default function App() {
const classes = useStyles();
return (
<ThemeProvider theme={theme}>
<CssBaseline />
<div style={{ height: "200px", overflowY: "scroll" }}>
<h1>
Div with enough content to scroll. Globally controlled scrollbar hover
color
</h1>
<h2>1</h2>
<h2>2</h2>
<h2>3</h2>
<h2>4</h2>
<h2>5</h2>
<h2>6</h2>
</div>
<div
style={{ height: "200px", overflowY: "scroll" }}
className={classes.divStyle}
>
<h1>
Div with enough content to scroll. Scrollbar hover color controlled by
classes.divStyle.
</h1>
<h2>1</h2>
<h2>2</h2>
<h2>3</h2>
<h2>4</h2>
<h2>5</h2>
<h2>6</h2>
</div>
</ThemeProvider>
);
}
I have my own theme, I can theming well.
Right now I have three different styles with material UI tabs. That's why I need to change styles using makeStyles.
This is example of tab I need to change
...
const useStyles = makeStyles(theme => ({
root: {
flexGrow: 1,
width: "100%",
backgroundColor: theme.pallete.primary
},
tabs: {
/// some styles
}
...
}
));
...
<Tabs
...someProps
className={classes.tabs}
>
element inside tab have such classes:
<button class="MuiButtonBase-root MuiTab-root MuiTab-textColorSecondary Mui-selected MuiTab-labelIcon">
I have tried to edit styles the same way as
... = createMuiTHeme ({
overrides: {
...some overrides
}
in my case:
const useStyles = makeStyles(theme => ({
root: {
flexGrow: 1,
width: "100%",
backgroundColor: "#121D42",
MuiButtonBase: {
root: {
///some styles
},
}
},
...
but it doesn't work with makeStyles
So how can I edit buttons inside tabs using makeStyles(), is it possible? Or help me with solution please
I have found a solution for now.
Using Styled Components and with creating a styled element - we can change styles easier. We should StylesProvider
const NewButton = styled(({styledComponentProp, ...rest}) => (
<Button classes={{label: 'label'}} {...rest}/>
))`
.label {
color: blue;
font-size: ${props => props.styledComponentProp};
}
`
export const BlueButton = styled(props => {
return (
<StylesProvider injectFirst>
<NewButton variant="contained" styledComponentProp="20px"> Red Labeled Button </NewButton>
</StylesProvider>
);
})`
`;
But have we any better solutions?
I'm trying center the text in an AppBar. I've tried centering the text in Typography element, using align="center", textAlign="center", and style={{ align: "center" }}, among others:
class App extends React.Component {
render() {
return (
<div>
<AppBar>
<Toolbar>
<Typography
variant="h6"
color="inherit"
style={{ align: "center" }}
>
Header
</Typography>
</Toolbar>
</AppBar>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("app"));
... but is doesn't work unless I remove the Toolbar. But then I would have to manually change the height of the AppBar, which I've also not found a way to do. In addition, every instance I've seen of the AppBar uses the Toolbar. All the solutions that I've found that could address this are outdated and don't work (there's no such thing as a ToolbarGroup anymore).
I've also tried using a const styles and exporting the AppBar withStyles():
const styles = {
root: {
flexGrow: 1
},
typography: {
align: "center"
}
};
function Header(props) {
const { classes } = props;
return (
<div className={classes.root}>
<AppBar>
<Toolbar>
<Typography
variant="h6"
color="inherit"
className={classes.typography}
>
Header
</Typography>
</Toolbar>
</AppBar>
</div>
);
}
Header.propTypes = {
classes: PropTypes.object.isRequired
};
export default withStyles(styles)(Header);
but it also doesn't work. I'm thinking this should be simple, I'm not sure what I'm missing.
The AppBar component is styled to render its children as flex items.
CSS property like text-align is used for horizontal alignment of children that is displayed different from a flex item e.g. as a table cell, block or inline-block.
Flex items can be centered horizontally using the justify-content or align-self CSS Property or more other ones.
const styles = {
root: {
flexGrow: 1,
},
appbar: {
alignItems: 'center',
}
};
function Header(props) {
const { classes } = props;
return (
<div className={classes.root}>
<AppBar
className={classes.appbar}
color="default"
position="static"
>
<!--...-->
</AppBar>
</div>
);
}
const styles = {
root: {
flexGrow: 1
},
typography: {
flexGrow: 1,
align: "center"
}
};
function Header(props) {
const { classes } = props;
return (
<div className={classes.root}>
<AppBar>
<Toolbar>
<Typography
variant="h6"
color="inherit"
className={classes.typography}
>
Header
</Typography>
</Toolbar>
</AppBar>
</div>
);
}
Header.propTypes = {
classes: PropTypes.object.isRequired
};
export default withStyles(styles)(Header);
use flexGrow,
will do the trick and is responsive in mobile also
Adding the following helped me center my title on mobile:
<Box sx={{ flexGrow: 0 }}>
<Box style={{ width: '40px', height: '40px' }}></Box>
</Box>