How to insert an icon centering material ui button?
Piece of Code:
<Button variant="outlined" startIcon={<Add color='primary'/>} style={{ maxWidth: "36px" }} />
Expected behavior:
Current behavior:
this margin is coming from startIcon class from material-ui itself. To remove this pass a class in to the startIcon in classes prop.
<Button
style={{ maxWidth: "36px", minWidth: "36px" }}
classes={{ startIcon: classes.startICon }}
variant="outlined"
startIcon={<Add />}
></Button>
And add the class in the useStyles to remove the margin.
const useStyles = makeStyles((theme) => ({
startICon: {
margin: 0
}
}));
Here is the working demo:
Related
I would like to make a row, where there is a title on the left and several buttons and a dropdown on the right.
Now, I would like to make the distance between Button 2 and the dropdown (e.g., Cat) smaller.
I guess we need to overwrite the left padding of the button inside the dropdown. I tried to put marginLeft: "-10px" and paddingLeft: "-10px" in the style of FluentProvider or Dropdown, but it did not work.
Could anyone help?
CodeSandbox: https://codesandbox.io/s/charming-ritchie-40tyj1?file=/example.tsx
import {
FluentProvider,
webLightTheme,
makeStyles,
shorthands
} from "#fluentui/react-components";
import {
Dropdown,
Option,
OptionGroup,
DropdownProps
} from "#fluentui/react-components/unstable";
import { CommandBarButton } from "#fluentui/react/lib/Button";
import * as React from "react";
import { initializeIcons } from "#fluentui/react/lib/Icons";
initializeIcons(/* optional base url */);
const useStyles = makeStyles({
dropdown: {
// removes default border around the dropdown
...shorthands.borderWidth(0),
// removes the blue bottom border when the dropdown is open
"::after": {
borderBottomWidth: 0
}
}
});
export const Grouped = (props: Partial<DropdownProps>) => {
const land = ["Cat", "Dog", "Ferret", "Hamster"];
const styles = useStyles();
return (
<div style={{ display: "flex", justifyContent: "space-between" }}>
<div style={{ flexBasis: "auto" }}>
<span style={{ lineHeight: "2.7rem" }}>Title</span>
</div>
<div style={{ display: "flex" }}>
<CommandBarButton
styles={{ root: { height: 44 } }}
iconProps={{ iconName: "Back" }}
ariaLabel="Back"
text="Button 1"
disabled={false}
checked={false}
/>
<CommandBarButton
styles={{ root: { height: 44 } }}
iconProps={{ iconName: "Up" }}
text="Button 2"
disabled={false}
checked={false}
/>
<FluentProvider style={{ display: "flex" }} theme={webLightTheme}>
<Dropdown
className={styles.dropdown}
style={{
minWidth: "auto",
display: "flex"
}}
defaultSelectedOptions={["Cat"]}
{...props}
>
<OptionGroup label="Land">
{land.map((option) => (
<Option key={option} disabled={option === "Ferret"}>
{option}
</Option>
))}
</OptionGroup>
</Dropdown>
</FluentProvider>
</div>
</div>
);
};
There might be many approaches, perhaps try specify styles for Dropdown button in makeStyles and pass it to the button. The value in below example can be further adjusted to suit the use case.
Forked demo with modification: codesandbox
const useStyles = makeStyles({
dropdown: {
// removes default border around the dropdown
...shorthands.borderWidth(0),
// removes the blue bottom border when the dropdown is open
"::after": {
borderBottomWidth: 0
}
},
// 👇 styles for the dropdown button
button: {
paddingLeft: "0px"
}
});
Pass the styles to the button of Dropdown:
<Dropdown
className={styles.dropdown}
style={{
minWidth: "auto",
display: "flex",
}}
defaultSelectedOptions={["Cat"]}
// 👇 pass styles to the button
button={{ className: styles.button }}
{...props}
>
...
You cant assign negative values to the padding. Try the same idea but on Button2, but with negative margin-right: -10px You then might need to move the whole navbar 10px to the right, since it wont stay aligned as it is now. You can fix it by doing the same on navbar content.
You might also try overriding padding with padding-left: 0 !important
I have created an Accordion for my Project. But I want the panel to be expanded only when the expand icon is clicked. Currently it is expanding on clicking anywhere on the panel. Can we customize its expanding behavior ?
CODE:
import React from "react";
import ExpandMoreIcon from "#material-ui/icons/ExpandMore";
import Accordion from "#material-ui/core/Accordion";
import AccordionDetails from "#material-ui/core/AccordionDetails";
import Typography from "#material-ui/core/Typography";
import AccordionSummary from "#material-ui/core/AccordionSummary";
export default function App() {
return (
<div style={{}}>
<h4>How to create Accordion in ReactJS?</h4>
<Accordion style={{ width: 400}}>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1a-content"
>
<div>Click to Expand</div>
</AccordionSummary>
<AccordionDetails>
<Typography>Greetings of the day :)</Typography>
</AccordionDetails>
</Accordion>
</div>
);
}
Yes we can do it like this
1- Create our own state with handler:
const [expand, setExpand] = React.useState(false);
const toggleAcordion = () => {
setExpand((prev) => !prev);
};
2- Add our state to the Accordion:
<Accordion expanded={expand} style={{ width: 400 }}>
3- Add onClick for the icon:
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1a-content"
IconButtonProps={{
onClick: toggleAcordion
}}
>
Full Code:
EDIT: Explanation: Material-UI Accordion has its own state (open or close) and its own click handler, what we did above is that we create our own state and override Material-UI Accordion state by the prop expanded and add event listener onClick to the icon button by the prop IconButtonProps, our event listener will open or close the Accordion by change our state.
NOTE: The code above doesn't change the style in case of the cursor pointer.
There is no public API to do what you want out-of-the-box, but you can use this CSS trick:
V5
<AccordionSummary
sx={{
pointerEvents: "none"
}}
expandIcon={
<ExpandMoreIcon
sx={{
pointerEvents: "auto"
}}
/>
}
>
V4
const useStyles = makeStyles({
summary: {
pointerEvents: 'none',
},
icon: {
pointerEvents: 'auto',
},
});
<AccordionSummary
className={classes.summary}
expandIcon={<ExpandMoreIcon className={classes.icon} />}
>
<Typography>Accordion 1</Typography>
</AccordionSummary>
Live Demo
For v5, and setting the mouse cursor properly:
1- Create our own state with handler:
const [accordionOpen, setAccordionOpen] = React.useState(false);
2- Add our state to the Accordion and toggle on click:
<Accordion expanded={accordionOpen}>
<AccordionSummary
expandIcon={
<ExpandMoreIcon
style={{ cursor: 'pointer' }}
onClick={() => setAccordionOpen(!accordionOpen)} />
}
sx={{ cursor: 'unset !important' }}
>
None of these solutions worked for me. I handled it with the e.stopPropagation() method, using it in the onClick event of the icon after calling the toggle function.
Like this:
import React from "react";
import ExpandMoreIcon from "#material-ui/icons/ExpandMore";
import Accordion from "#material-ui/core/Accordion";
import AccordionDetails from "#material-ui/core/AccordionDetails";
import Typography from "#material-ui/core/Typography";
import AccordionSummary from "#material-ui/core/AccordionSummary";
export default function App() {
return (
<div style={{}}>
<h4>How to create Accordion in ReactJS?</h4>
<Accordion style={{ width: 400}}>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1a-content"
>
<div ><img src='yourIcon' onClick={(e) => { toggleAccordion(); e.stopPropagation() }} /></div>
</AccordionSummary>
<AccordionDetails>
<Typography>Greetings of the day :)</Typography>
</AccordionDetails>
</Accordion>
</div>
);
}
you can try set expanded true/false in the Accordion
function Container(props) {
const [expand, setExpand] = React.useState(false);
const toggleAccordion = () => {
setExpand((prev) => !prev);
};
return (
<React.Fragment>
<Accordion expanded={expand}>
<AccordionSummary
expandIcon={<ExpandMoreIcon
onClick={toggleAccordion}
/>}
aria-controls="panel1a-content"
id="panel1a-header"
>
<Typography></Typography>
</AccordionSummary>
<AccordionDetails>
</AccordionDetails>
</Accordion>
</React.Fragment>)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
I am using nextjs with material ui
"#mui/material": "^5.0.1",
"#mui/styles": "^5.0.1",
and here is my component
import { AppBar, Toolbar, Typography, Box, Button, Link } from "#mui/material";
import { makeStyles } from "#mui/styles";
const Navbar = () => {
const useStyles = makeStyles(() => ({
navItem: {
color: "white"
}
}));
const classes = useStyles();
return (
<>
<Box sx={{ flexGrow: 1 }}>
<AppBar position="static">
<Toolbar>
<Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
MyCode
</Typography>
<Typography variant="h6" component="div">
<Link className={classes.navItem} href="/blog">Blog</Link>
</Typography>
<Button color="inherit">Login</Button>
</Toolbar>
</AppBar>
</Box>
</>
)
}
export default Navbar;
I have created this navbar with a blog nav item and with login button.
Blog nav item is not visible on the screen as the color it inherit the color of background of nav bar.
So I added some classes by using makeStyles and created a navItem class with color:white
It shows the class on the DOM on html but this is not visible in Styles section, so color is not white.
what can be the issue?
You should define useStyles outside your functional component. In this case you don't need use makeStyles. Just:
<Link color="white" />
When I clicked IconButton the background color changed to an oval shape. I need to change the background color after onclick
CSS
CSS for IconButton. Changed the background color when hover. I need the same for onClick
const positionStyle = makeStyles(theme => ({
paper: {
backgroundColor: theme.palette.accent[100],
},
iconButton: {
padding: "10px",
margin: "0 5px 1px 0",
"&:hover, &.Mui-focusVisible, &:active": {
backgroundColor: theme.palette.accent[100],
},
"&$buttonDisabled": {
color: theme.palette.accent[100],
},
},
})
Material UI
<Paper className={classes.paper}>
<Box display={"flex"} height={theme.spacing(2.3)}>
<IconButton
color={"inherit"}
size={"small"}
className={classes.iconButton}
onClick={() => {
history.push("/a")
}}>
<img src={"/static/images//a.svg"} />
<Box pl={1} mt={"-4px"} maxWidth={theme.spacing(10)}>
<Typography variant={"subtitle1"} component="p">
{" Hello"}
</Typography>
</Box>
</IconButton>
</Box>
</Paper>
as i read here
Can I have an onclick effect in CSS?
the best way to do this is a checkbox trick,
other solutions are also on the page i linked
either if you have more liberty you can use JS
Have a good day
I am starting to use React/Material-UI, and also new to CSS etc...
I have a simple page layout with an APPBar. Unfortunately this AppBar overlaps the elements which are meant to go below it.
I have found this answer:
AppBar Material UI questions
But this feels completely wrong. What if my AppBar has a variable height, depending on the icons, display modes etc...?
I have tried to create a vertical grid, to wrap the elements in different items, made the top container a flex one and play with flex settings, nothing seems to work, the app bar always sits on top of the text.
The code is very simple:
import React from 'react';
import { AppBar, Typography, Box } from '#material-ui/core';
function App() {
return (
<div>
<AppBar>
<Typography variant='h3'>
AppBar
</Typography>
</AppBar>
<Box>
<Typography variant='h1' style={{ border: '1px solid black' }}>
Hello
</Typography>
</Box>
</div>
)
}
export default App;
The "Hello" text chunk is only half visible:
This is happening because the MaterialUI App Bar defaults to position="fixed". This separates it from the standard DOM's layout to allow content to scroll beneath it, but as a result no space is made for it on the page.
You can get around this by wrapping all content below it in a div and specifying enough margin, or by changing the position property of <AppBar> so it's no longer "fixed". In your example, you could also just apply the styles to <Box> if that's the only content below the <AppBar>.
e.g.
import React from 'react';
import { AppBar, Typography, Box } from '#material-ui/core';
function App() {
return (
<div>
<AppBar>
<Typography variant='h3'>
AppBar
</Typography>
</AppBar>
<div style={{marginTop: 80}}>
<Box>
<Typography variant='h1' style={{ border: '1px solid black' }}>
Hello
</Typography>
</Box>
</div>
</div>
)
}
export default App;
MaterialUI provides a theme mixin for the AppBar that can help. Not sure if you're using the recomended JSS setup, but you can do something like this:
import withStyles from '#material-ui/core/styles/withStyles';
const styles = theme => ({
appBarSpacer: theme.mixins.toolbar
});
const style = withStyles(styles)
function MyScreen ({ classes }) {
<AppBar></AppBar>
<div className={classes.appBarSpacer}></div>
<Box></Box>
}
export default style(MyScreen)
The mixin will give that div the same height as your AppBar, pushing down the other content.
According to Material-ui, there are 3 solutions to this problem.
https://material-ui.com/components/app-bar/#fixed-placement
You can use position="sticky" instead of fixed. ⚠️ sticky is not supported by IE 11.
You can render a second component
You can use theme.mixins.toolbar CSS
I personally enjoy using the 2nd solution like this.
return (
<>
<AppBar position="fixed">
<Toolbar>{/* content */}</Toolbar>
</AppBar>
<Toolbar />
</>
);
<AppBar position='static'>
use this it will do it and content won't hide under Appear
I think having a good app setup is opinianted, but I would recommend the following
import React from "react";
import ReactDOM from "react-dom";
import {
AppBar,
Typography,
Box,
CssBaseline,
makeStyles,
Container,
Grid,
Toolbar
} from "#material-ui/core";
const useStyles = makeStyles(theme => ({
content: {
flexGrow: 1,
height: "100vh",
overflow: "auto"
},
appBarSpacer: theme.mixins.toolbar,
title: {
flexGrow: 1
},
container: {
paddingTop: theme.spacing(4),
paddingBottom: theme.spacing(4)
}
}));
function App() {
const classes = useStyles();
return (
<div className={classes.root}>
<CssBaseline />
<AppBar position="absolute">
<Toolbar className={classes.toolbar}>
<Typography
component="h1"
variant="h6"
color="inherit"
noWrap
className={classes.title}
>
AppBar
</Typography>
</Toolbar>
</AppBar>
<main className={classes.content}>
<div className={classes.appBarSpacer} />
<Container maxWidth="lg" className={classes.container}>
<Grid container spacing={3}>
<Grid item xs={12}>
<Box>
<Typography variant="h1" style={{ border: "1px solid black" }}>
Hello
</Typography>
</Box>
</Grid>
</Grid>
</Container>
</main>
</div>
);
}
try this!
const useStyles = makeStyles((theme) => ({
root: {
flexGrow: 1,
[theme.breakpoints.down('sm')]: {
marginBottom: 56,
},
[theme.breakpoints.up('sm')]: {
marginBottom: 64,
},
},
menuButton: {
marginRight: theme.spacing(1),
},
title: {
flexGrow: 1,
}, }))
You can add the above to your code like this
const Navbar = () => {
const classes = useStyles()
return (
<div className={classes.root}>
<AppBar position='fixed' color='primary'>
<Toolbar>
<IconButton
edge='start'
className={classes.menuButton}
color='inherit'
aria-label='menu'>
<MenuIcon />
</IconButton>
<Typography variant='h6' className={classes.title}>
News
</Typography>
<Button color='inherit'>Login</Button>
</Toolbar>
</AppBar>
</div>
)}
For more documentation visit material-ui breakpoint customization