I have two buttons in a DialogActions like so.
The JSX I have is the following:
<DialogActions classes={{ root: classes.dialogActionsLeft }}>
<Button
autoFocus
onClick={() => {
setOpen(false);
}}
>
Cancel
</Button>
<Button
onClick={() => {
setOpen(false);
navigate("/");
}}
>
Finish
</Button>
</DialogActions>
And the CSS I have is:
const useStyles = makeStyles((theme) => ({
dialogActionsLeft: {
"&:nth-child(1)": {
justifyContent: `flex-start`
}
}
}));
If the pseudo selector isn't there both buttons will be left aligned, and if it is there, both buttons stay right aligned. This tells me I'm using the pseudo selector wrong but I can't figure out how to fix it
Do you need to left align both buttons?
If that is the case, try &:nth-child(n).
Update
You must specify justifyContent for dialogActionsLeft as well.
dialogActionsLeft: { justifyContent: 'space-between', '&:nth-child(1)': { justifyContent: flex-start, } }
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'm using V4 MUI Chip component with size : 'small' and variant: 'outlined' with a deleteIcon specified.
https://v4.mui.com/components/chips/
I'd like to override the margin-right property of the deleteIcon but I'm having trouble getting the right specificity, because MUI is applying more specific styles.
The following styles are applied to the delete icon by MUI:
.MuiChip-outlined-253 .MuiChip-deleteIconSmall-267 {
margin-right: 3px;
}
.MuiChip-outlined-253 .MuiChip-deleteIcon-266 {
margin-right: 5px;
}
How do I apply a style to override the margin-right of the deleteIcon and set it to e.g. '10px'?
You can use the class .MuiChip-deleteIcon based on the Chip api documentation (https://v4.mui.com/api/chip/)
Here is a working codesandbox to play with (has for the both default and outlined variants).
Here is the code to implement the change you want.
import React from "react";
import { makeStyles } from "#material-ui/core/styles";
import Chip from "#material-ui/core/Chip";
import FaceIcon from "#material-ui/icons/Face";
const useStyles = makeStyles((theme) => ({
root: {
display: "flex",
justifyContent: "center",
flexWrap: "wrap",
"& > *": {
margin: theme.spacing(0.5)
},
//Here is where you customise the css for the delete icon
"& .MuiChip-deleteIcon": {
marginRight: "20px", // Change those values to yours
},
//For customising the outlined the css for the delete icon
"& .MuiChip-outlined": {
"& .MuiChip-deleteIcon": {
marginRight: "10px", // Change those values to yours
}
}
}
}));
export default function Chips() {
const classes = useStyles();
const handleDelete = () => {
console.info("You clicked the delete icon.");
};
const handleClick = () => {
console.info("You clicked the Chip.");
};
return (
<div className={classes.root}>
<Chip label="Deletable primary" onDelete={handleDelete} color="primary" />
<Chip
icon={<FaceIcon />}
label="Deletable secondary"
onDelete={handleDelete}
color="secondary"
/>
<Chip
icon={<FaceIcon />}
label="Deletable secondary"
onDelete={handleDelete}
color="secondary"
variant="outlined"
/>
</div>
);
}
Another way would be to do something similar in the theme.
I am using React 17 and MUI 5.6. I have a component that needs to add new borders to the parent container based on user input. I found some non-MUI CSS tutorials for achieving what I want, but their borders are statically coded in CSS and not added on user demand.
Here's a working sandbox for one border. Would appreciate any help on how to support multiple borders.
This should help to solve your problem. Here is the working code, user can decide color with buttons but you can implement same solution also with dropdown options. https://codesandbox.io/embed/wonderful-worker-g8fzyi?fontsize=14&hidenavigation=1&theme=dark
import { Box } from "#mui/material";
import Button from "#mui/material/Button";
import { useState } from "react";
import "./styles.css";
export default function App() {
const [colors, setColors] = useState([]);
const [pixel, setPixel] = useState(6);
const addColor = async (color) => {
setPixel(pixel + 2);
let randomColor = `0 0 0 ${pixel}px ${color}`;
setColors([...colors, randomColor]);
};
return (
<div
style={{
width: "100vw",
height: "100vh",
display: "flex",
justifyContent: "center",
alignItems: "center",
flexDirection: "column"
}}
>
<Box
sx={{
width: "50%",
height: "20%",
border: 3,
boxShadow: colors.join(",")
}}
></Box>
<div style={{ marginTop: 100 }}>
<Button onClick={() => addColor("#FFFF00")}>Yellow</Button>
<Button onClick={() => addColor("#FF002B")}>Red</Button>
<Button onClick={() => addColor("#0000FF")}>Blue</Button>
<Button onClick={() => addColor("#2BFF00")}>Green</Button>
</div>
</div>
);
}
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:
In my react app I created a card with min width and height and it contains only a header. I would like to add a flexbox which would take the whole left space with justify-content="center" and align-items="center" so when I add a circular progress element it will be in the middle of the card. Unforunately whatever I do the flexbox's height equals the loading spinner height and it does not take the whole space. How to fix it?
My Component:
function AccountSettings({isLoading, id, username, isDisable}) {
const classes = useStyles();
return (
<Card
className={classes.accountSettings}
>
<CardHeader
title="Something"
/>
<Divider/>
<Box
display="flex"
alignItems="center"
justifyContent="center"
height={"100%"}
width={"100%"}
>
<CircularProgress/>
</Box>
</Card>
);
}
My style:
import {makeStyles} from "#material-ui/styles";
export default makeStyles(theme => ({
root: {
maxWidth: "1000px"
},
pageTitle: {
padding: "5px"
},
accountSettings: {
minWidth: "312px",
minHeight: "273px",
}
}));
And here my main view:
<div className={classes.root}>
<AccountSettings/>
</div>
This image shows my issue
Here is one solution
Add the following to the styles:
accountSettings: {
display: 'flex',
flexDirection: 'column'
},
box: {
flexGrow: 1
}
And add the class to the Box element:
<Box
className={classes.box}