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>
Related
I tried creating a custom MUI Text field with the following code:
const CustomTextField = styled(TextField)(() => ({
height: '56px',
width: '505px',
'& input + fieldset': {
borderRadius: '12px',
borderColor: 'white',
color: 'black'
}
}));
export function SearchTextField(props: TextFieldProps): JSX.Element {
return (
<CustomTextField
style={{ width: '505px' }}
InputProps={{
style: {
height: '56px'
},
startAdornment: (
<InputAdornment position="start">
<SearchOutlined fontSize="medium" color="info" />
</InputAdornment>
)
}}
// eslint-disable-next-line react/jsx-props-no-spreading
{...props}
/>
);
}
When I add a background to the same, the input and the icon I have added is disappearing. I can still type and the input is still being taken but I can't see them.
It's supposed to look like this
But looks like this
Any kind of help is appreciated
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.
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>
Using material-ui in my react app, is there a way I can change the position when the dialog is opened? now it's always centered.
Thanks in advance!
You can create styles and pass it through classes prop. Here is an example of how you could do that.
import React from 'react';
import { makeStyles, Dialog } from '#material-ui/core';
const useStyles = makeStyles({
dialog: {
position: 'absolute',
left: 10,
top: 50
}
});
function Example() {
const classes = useStyles();
return (
<Dialog
classes={{
paper: classes.dialog
}}
/* rest of the props */
>
{/* content of the dialog */}
</Dialog>
);
}
I would say don't use position: absolute, it could break the scrolling behavior. The position was control differently with scroll='paper' or scroll='body'
You can use the following code to always align your dialog to the top of the page with two custom classes.
Demo: codesandbox.io
See the original article with explanation
const useStyles = makeStyles({
topScrollPaper: {
alignItems: 'flex-start',
},
topPaperScrollBody: {
verticalAlign: 'top',
},
})
function SimpleDialog(props: SimpleDialogProps) {
const classes = useStyles()
return (
<Dialog
onClose={handleClose}
aria-labelledby="simple-dialog-title"
open={open}
scroll="paper"
classes={{
scrollPaper: classes.topScrollPaper,
paperScrollBody: classes.topPaperScrollBody,
}}
></Dialog>
)
}
For MUI 5, we can use both SxProps and styled() utility:
Via SxProps:
// flex-start: to position it at the top
// flex-end: to position it at the bottom
// center: to position it at the center
const sx: SxProps = {
"& .MuiDialog-container": {
alignItems: "flex-start"
}
};
<Dialog
open={infoModalOpen}
onClose={() => setInfoModalOpen(false)}
sx={sx}
scroll="paper"
>
....
</Dialog>
Via styled components:
const StyledDialog = styled(Dialog)(({theme}) => ({
"& .MuiDialog-container": {
alignItems: "flex-start"
}
}));
<StyledDialog
open={infoModalOpen}
onClose={() => setInfoModalOpen(false)}
sx={sx}
scroll="paper"
>
....
</StyledDialog>
#radovix's and #Sumit Wadhwa's answers are correct. In case you don't want to use makeStyles, Here is how I resolved it.
When scroll="body";
<Dialog
fullWidth
onClose={() => setOpen(false)}
open={true}
scroll="body"
PaperProps={{ sx: { mt: "50px", verticalAlign: "top" } }}
>
{/* Dialog Content here */}
</Dialog>;
When scroll="paper";
<Dialog
fullWidth
onClose={() => setOpen(false)}
open={true}
scroll="paper"
sx={{
"& .MuiDialog-container": {
alignItems: "flex-start",
},
}}
PaperProps={{ sx: { mt: "50px" } }}
>
{/* Dialog Content here */}
</Dialog>;
You can adjust the margin-top however you like
I'm implementing a BottomNavigation bar for mobile. I want the label texts to be UPPERCASE and add 5px to spacing to icon above.
<BottomNavigation
value={selectedTab}
onChange={this.handleTabChange}
className={classes.bottomNav}>
<BottomNavigationAction
label="Details"
value={0}
icon={<DescriptionIcon />}
className={classes.bottomNavLabel}
/>
<BottomNavigationAction
label="Card"
value={1}
icon={<CreditCardIcon />}
disabled={!navEnabled}
className={classes.bottomNavLabel}
/>
</BottomNavigation>
My styles look like this:
export default ({ spacing, breakpoints }: Theme) =>
createStyles({
bottomNav: {
position: 'fixed',
bottom: 0,
width: '100%',
},
bottomNavLabel: {
textTransform: 'uppercase',
marginTop: 5,
},
})
I tried styling in bottomNavLabel class but it's hitting the whole button element. I only want to hit the <span> element with the label inside.
According to docs i can override classes.label but I can't get it to work. I suspect this means I create a wrapper component around BottomNavigationAction but I would prefer not to do this, as I'm not using this elsewhere and it feels kind of "bloated" to do.
How do I do that?
I figured it out. <BottomNavigationAction> takes a prop classes where I define the label styling. Like this:
<BottomNavigation
value={selectedTab}
onChange={this.handleTabChange}
className={classes.bottomNav}>
<BottomNavigationAction
label={<span className="bottomNavLabel">Details</span>}
value={0}
icon={<DescriptionIcon />}
classes={{label: classes.label}}
/>
<BottomNavigationAction
label={<span className="bottomNavLabel">Card</span>}
value={1}
icon={<CreditCardIcon />}
disabled={!navEnabled}
classes={{label: classes.label}}
/>
</BottomNavigation>
And styling:
export default ({ spacing, breakpoints }: Theme) =>
createStyles({
bottomNav: {
position: 'fixed',
bottom: 0,
width: '100%',
},
label: {
textTransform: 'uppercase',
marginTop: 5,
},
})