Is there any way to remove top and bottom padding from Menu component?
Tried to set padding to 0 in PaperProps and also in makeStyles but when I inspect the element on browser it still shows 8px default padding on top and bottom.
Here's the code if it helps:
<Menu
className={classes.menuSearchContainer}
PaperProps={{
style: {
backgroundColor: "#fff",
width: "270px",
paddingTop: '0px',
},
}}
>
<Input
className={classes.menuSearchInput}
type="text"
/>
target the list class from Menu classes prop.
<Menu
{...other props}
classes={{list:classes.list}}
>
{...meuItem}
</Menu>
and useStlyes will be:
const useStyles = makeStyles(() =>
createStyles({
list:{
padding:'0'
}
}),
);
Checkout a Codesandbox demo
use MenuListProps:
<Menu
className={classes.menuSearchContainer}
PaperProps={{
style: {
backgroundColor: "#fff",
width: "270px",
},
}}
MenuListProps={{ sx: { py: 0 } }}
>
<Input
className={classes.menuSearchInput}
type="text"
/>
Try this
<MenuItem dense=true />
From Materiul-UI dense : If true, compact vertical padding designed for keyboard and mouse input will be used.
This might be the issue.
Related
I need to change my dropdown hover to green. I tried inline CSS and makeStyle(), But non of these are not working for me. I have no idea to change this hover color. If anyone can help me with this, I really appreciate it.
I need to change this hover color into green.
This is my code:-
<Select
className={dropDowStyle.select}
style={{
borderRadius: '8px', marginLeft: '-150px',
width: '163px', height: '45px', fontSize: '15px',
backgroundColor: "transparent",borderColor:primaryColor + "88"
}}
sx={{width: 163}}
// defaultValue=""
input={<OutlinedInput style={{borderColor: primaryColor + "88",}}/>}
displayEmpty
value={city}
renderValue={(value) => {
return (
<Box sx={{display: "flex", gap: 2.5}}>
<SvgIcon style={{fontSize: '20px'}}>
<LocationOnIcon/>
</SvgIcon>
{renderLocation && value}
</Box>
);
}}
onChange={cityValueHandler}
>
{shopLocation.map((option) => (
<MenuItem key={option.gg} value={option.gg}>
{option.gg}
</MenuItem>
))}
</Select>
The container of the menu list is a Paper which is part of the Menu (the dropdown of the Select). You can target the props of the nested component like below. See here for the list of Menu classNames. Also have a look at all classNames for the component states.
<Select
// to override the border color of the Select input
sx={{
"&:hover": {
"&& fieldset": {
border: "3px solid green"
}
}
}}
// to override the color of the dropdown container
MenuProps={{
PaperProps: {
sx: {
"& .MuiMenuItem-root.Mui-selected": {
backgroundColor: "yellow"
},
"& .MuiMenuItem-root:hover": {
backgroundColor: "pink"
},
"& .MuiMenuItem-root.Mui-selected:hover": {
backgroundColor: "red"
}
}
}
}}
Live Demo
You can use inputProps of Select and set the sx prop like this:
<Select
inputProps={{
sx: {
"&.MuiOutlinedInput-input:hover": {
border: "2px solid green"
}
}
}}
>
Just inspect the element you want to apply hover CSS.
https://mui.com/customization/how-to-customize/#overriding-nested-component-styles
For example find MuiSlider-thumb in the elements and try to apply on, discard the hash value in front
.MuiSlider-thumb:hover {
color:green;
}
or background to green.
Be careful as this might override all of the selects in your code base, so it might not be the best solution.
I'm trying to customize the tooltip appearance and the position of the speed dial but get an error when doing both.
const useStyles = makeStyles((theme) => ({
root: {
height: 380,
transform: "translateZ(0px)",
flexGrow: 1,
},
speedDial: {
position: "absolute",
bottom: theme.spacing(2),
right: theme.spacing(0),
},
tooltip: {
backgroundColor: "#37517e",
fontSize: "1.1em",
},
}));
<SpeedDial
ariaLabel="Tutor SpeedDial"
className={classes.speedDial}
icon={<SpeedDialIcon openIcon={<EditIcon />} />}
onClose={handleClose}
onOpen={handleOpen}
open={open}
>
{actions.map((action) => (
<SpeedDialAction
key={action.name}
icon={action.icon}
tooltipTitle={action.name}
TooltipClasses={classes}
onClick={handleClose}
/>
))}
</SpeedDial>
The code actually compiles and works but I get a console error
index.js:1 Material-UI: The key speedDial provided to the classes prop is not implemented in ForwardRef(Tooltip).
You can only override one of the following: popper,popperInteractive,popperArrow,tooltip,tooltipArrow,arrow,touch,tooltipPlacementLeft,tooltipPlacementRight,tooltipPlacementTop,tooltipPlacementBottom.
It's pretty clear that the issue is because ToolTipClasses cannot override the speedDial class but I'm not sure how else to do it.
Any guidance will be much appreciated
Thanks
I came up with solution by by creating a StyledSpeedDial instead so that I could remove the speeddial onbject from the classes style
const StyledSpeedDial = styled(SpeedDial)(({ theme }) => ({
position: "absolute",
"&.MuiSpeedDial-directionUp, &.MuiSpeedDial-directionLeft": {
bottom: theme.spacing(2),
right: theme.spacing(0),
},
}));
<StyledSpeedDial
ariaLabel="Tutor SpeedDial"
icon={<SpeedDialIcon openIcon={<EditIcon />} />}
onClose={handleClose}
onOpen={handleOpen}
open={open}
>
{actions.map((action) => (
<SpeedDialAction
key={action.name}
icon={action.icon}
tooltipTitle={action.name}
TooltipClasses={classes}
onClick={handleClose}
/>
))}
</StyledSpeedDial>
Is there a way to use the outline variant for the fab button in material ui
<Fab variant="here i see rounded || extended" color="primary" size="small" aria-label="scroll back to top">
<KeyboardArrowUp />
</Fab>
is there a way i could use the outline version and still inherit material ui ripple effect and other styles
As far as I know you cannot have outline version for that. But you can always write CSS for that. I had a simple demo for this
Edit: here are the code
const useStyles = makeStyles((theme: Theme) =>
createStyles({
root: {
"& > *": {
margin: theme.spacing(1)
}
},
fabStyle: {
backgroundColor: "white",
color: theme.palette.primary.light,
borderColor: theme.palette.primary.light,
"&:hover": {
backgroundColor: theme.palette.primary.light,
color: "white"
}
}
})
);
export default function FloatingActionButtons() {
const classes = useStyles();
return (
<div className={classes.root}>
<Fab color="primary" aria-label="add" className={classes.fabStyle}>
<AddIcon />
</Fab>
</div>
);
}
You should be able to inject classes into the Fab component. You can refer to this link for more information Customizing Components
<Fab
classes={{
root: classes.root, // class name, e.g. `classes-nesting-root-x`
label: classes.label, // class name, e.g. `classes-nesting-label-x`
}}
variant="here i see rounded || extended" color="primary" size="small" aria-label="scroll back to top">
<KeyboardArrowUp />
</Fab>
I am trying to customize Material-UI StepConnector with classes, but it seems to not work.
I use material-ui 1.4.0
Here is how I try to do it.
<Stepper
connector={
<StepConnector
classes={{
completed: { borderColor: "red" },
line: { borderColor: "red" }
}}
/>
}
activeStep={activeStep}
orientation="vertical"
>
Here is demo https://codesandbox.io/s/oxrw7ryy7z
As you can see the StepConnector color does not change at all.
The StepConnector doesn't have a complete class in v1.4.0, documentation for v1.4.0: https://v1-4-0.material-ui.com/api/step-connector/
If you want to change the color of the wole line try this:
// In your style
contentRoot: {
borderColor: 'red',
},
connectorLine: {
borderColor: 'red',
},
...
<StepConnector
classes={{
line: classes.connectorLine
}}
/>
...
<StepContent
classes={{
root: classes.contentRoot,
}}
>
Demo: https://codesandbox.io/s/p9wj1498yx
Add a new class in your styles:
connector: {
borderLeft: "1px red solid"
}
And then use it in your component:
<StepConnector
classes={{
line: classes.connector
}}
/>
The completed class does not appear to be a class that can be overriden in this version.
Country select of
autocomplete demo at material-ui
uses react-select and material-ui controls,
shows multiline text, select control changes it's dimensions when country doesn't fit in one line.
I see this behaviour at CodeSandbox when I decrease width of web browser.
How can I modify demo so that country will always fit in one line,
select control will not change it's dimensions?
TextField has props multiline, rows and rowsMax props that can be changed.
If that isn't what you need then you could add the following css to the text in the TextField so the text does not wrap:
overflow: hidden;
white-space: nowrap;
I managed this by mixing a few different things:
First create a class like so:
const useStyles = makeStyles((theme: Theme) =>
createStyles({
closed: {
flexWrap: "nowrap",
overflowX: "hidden",
},
// Add a linear gradient behind the buttons and over the Chips (if applies)
endAdornment: {
background:
"linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.6) 22%, rgba(255,255,255,1) 60%)",
bottom: 0,
display: "flex",
alignItems: "center",
right: "0 !important",
paddingRight: 9,
paddingLeft: theme.spacing(2),
top: 0,
},
})
);
Then in your static function add this :
const onOpenChange = (open: boolean | null) => {
setIsOpen(open);
};
const inputStyle = clsx({
[classes.closed]: !isOpen, //only when isOpen === false
});
Finally on the Autocomplete component itself use:
classes={{ inputRoot: inputStyle, endAdornment: classes.endAdornment }}
onOpen={() => onOpenChange(true)}
onClose={() => onOpenChange(false)}
If you are wondering how to make each option be displayed in just one line with ellipsis, you can do the follow:
<Autocomplete
...
getOptionLabel={(option: any) => `${option.label} (${option.code})`}
renderOption={(option) => (
<React.Fragment>
<div style={{ textOverflow: 'ellipsis', overflow: "hidden", whiteSpace: "nowrap" }}>
{option.label} ({option.code})
</div>
</React.Fragment>
)}
...
/>
For the Country Demo example, you can check what I did here: https://codesandbox.io/s/autocomplete-with-ellipsis-i8hnw