Using Material-UI 4.5.2. I'm adding an end adornment and want to change the right padding so that the icon would be in a right most position. I tried to override it with classes property but couldn't make it. https://codesandbox.io/s/textfield-adornedend-wf5p8
Thanks in advance
You need to provide adornedEnd class rule to InputProps:
InputProps={{
endAdornment: (
<InputAdornment position="end">
<IconButton disableRipple={true} size="small">
<ClearIcon />
</IconButton>
</InputAdornment>
),
classes: {
adornedEnd: classes.endAdornment
}
}
}
Related
I'm trying to style material-ui DataGrid component to justify the content in the cells. I am reading the material ui docs about styling but I don't seem to doing it correct and frankly find the docs on styling very confusing.
The doc here: https://material-ui.com/customization/components/#overriding-styles-with-classes implies I should be able to do something like this:
const StyledDataGrid = withStyles({
cellCenter: {
justifyContent: "center",
},
})(DataGrid);
<div style={{ height: 300, width: '100%' }}>
<StyledDataGrid rows={rows} columns={columns} />
</div>
However, when I do this, I don't see the style being added to the MuiDataGrid-cellCenter DOM element. Attaching a screenshot which shows the element classes. In the inspector I see that the style isn't being added (and if I add it manually I get the desired results). Am I not using the withStyles function correctly?
So after a bit more messing around, I believe the issue is that the DataGrid component does not support the classes property (which it seems most of the material ui components do). I believe the withStyles usage about is shorthand for passing the classes via the classes prop. Since the prop isn't listed in the API https://material-ui.com/api/data-grid/ I'm assuming this is why it isn't working. I confirmed that I can get the styles working by using a combination of the className parameter with descendant selection.
If someone determines I'm wrong and there is a way to get withStyles working on this component please comment.
const useStyles = makeStyles({
root: {
"& .MuiDataGrid-cellCenter": {
justifyContent: "center"
}
}
});
...
export default function X() {
const classes = useStyles();
return (
...
<DataGrid className={classes.root} checkboxSelection={true} rows={rows} columns={columns} />
...
)
}
ALTERNATIVE SOLUTION: (for others with similar issues)
If you are working within a class and cannot use hooks...
<div>
<DataGrid
rows={rows}
columns={columns}
sx={{
'&.MuiDataGrid-root .MuiDataGrid-cell:focus': {
outline: 'none',
},
}}
/>
</div>
In my app, the expansion arrow has to be in the left side of the panel.
But, by default it's displaying in the right side.
This :
<ExpansionPanelSummary
className={classes.panelSummary}
expandIcon={<ExpandMoreIcon />}
IconButtonProps={{edge: 'start'}}
aria-controls='panel1a-content'
id='panel1a-header'
>
Doesn't made it.
Granted, you can't (easily) change the order in which the components appear in the HTML. However, there is a way using only CSS. ExpansionPanelSummary uses display: flex; you can therefore set the order property on the icon to make it appear to the left of the content.
This can be achieved with either useStyles or withStyles (Or possibly using plain CSS, but I haven't tried it); here's how you'd go about using the latter:
import withStyles from "#material-ui/core/styles/withStyles";
const IconLeftExpansionPanelSummary = withStyles({
expandIcon: {
order: -1
}
})(ExpansionPanelSummary);
You can then write the rest of your code using IconLeftExpansionPanelSummary instead of ExpansionPanelSummary when you want the icon to appear to the left. Don't forget to set IconButtonProps={{edge: 'start'}} on the component for proper spacing.
<AccordionSummary
className={classes.accordionSummary}
classes={{
expandIcon: classes.expandIcon,
expanded: classes.expanded
}}
IconButtonProps={{
disableRipple: true
}}
></AccordionSummary>
You can add class and use flex-direction
accordionSummary: {
flexDirection: 'row-reverse'
}
It's simple
add class on <ExpansionPanelSummary> like this
<ExpansionPanelSummary className={classes.panelSummary}>
add css against this class in jss like this
panelSummary:{flexDirection: "row-reverse"},
In case using css
add class on <ExpansionPanelSummary> like this
<ExpansionPanelSummary className="panelSummary">
add css against this class in jss like this
.panelSummary{flex-direction: row-reverse;}
you can get the expansion panel icon on left by removing it from expandIcon and add it as a children in Summary something like this
<ExpansionPanel defaultExpanded={true}>
<ExpansionPanelSummary aria-controls="panel1a-content">
{this.state.expanded ? <RemoveIcon/> : <ExpandIcon />}
<Typography component='h4' variant='h4'>My Expansion Panel</Typography>
</ExpansionPanelSummary>
<ExpansionPanelsDetails />
</ExpansionPanel>
The challenge is that the order is hardcoded into the codebase and you will not be able to use the ExpansionPanel as is.
If you look at the implementation, you will find the code as below
<div className={clsx(classes.content, { [classes.expanded]: expanded })}>{children}</div>
{expandIcon && (
<IconButton
disabled={disabled}
className={clsx(classes.expandIcon, {
[classes.expanded]: expanded,
})}
edge="end"
component="div"
tabIndex={-1}
aria-hidden
{...IconButtonProps}
>
{expandIcon}
</IconButton>
)}
As you see the <div> contains the text and then the IconButton is displayed.
So, you may have to work with what's provided out of the box or create your own Component based on what material-UI provides.
Hope that helps.
You can modify the CSS class like this:
notice the absolute position, in this way you can move the div that contains the icon whatever position you want with 'left' or 'right' properties
const useStyles = makeStyles((theme) => ({
ExpansionPanelSummaryExpandedIcon: {
'& div.MuiExpansionPanelSummary-expandIcon': {
position: 'absolute',
right: '5%',
},
}
}));
and then use in the ExpansionPanelSummary
<ExpansionPanelSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1-content"
id="panel1bh-header"
className={classes.ExpansionPanelSummaryExpandedIcon}
>
references:
https://cssinjs.org/?v=v10.3.0
https://v4-8-3.material-ui.com/customization/components/#overriding-styles-with-classes
I am new to React and Material UI. I am struggling with how much vertical space the components take up. One thing I would like to do is decrease the height of the toolbar.
I have tried specifying the style:
<Toolbar style={{ height: '36px' }}>
I have also tried doing it this way:
const styles = {
root: {
height: 36,
}
};
<Toolbar className={classes.root} >
but neither works. Is there a different way to do this?
I tried changing the Toolbar height before too but it didn't work.
I end up just setting Toolbar variant to dense which still give me a shorter height Toolbar compared to the regular one.
<Toolbar variant="dense">
You need to change the min-height to adjust the height, as min-height is specified in material-ui.css as 64px.
const styles = {
customizeToolbar: {
minHeight: 36
}
};
<Toolbar className={classes.customizeToolbar} >
Hope this will help you.
To change height of Toolbar globally, configure this in MUI theme:
const theme = createTheme({
components: {
MuiToolbar: {
styleOverrides: {
dense: {
height: 32,
minHeight: 32
}
}
}
},
})
Then use this theme:
<ThemeProvider theme={theme}>
...
</ThemeProvider>
This way you can tune look of many Mui components in theme, and this will be applied for all elements in the <ThemeProvider/> react block.
No css tweaks for individual elements, rather do it correctly in one place by modifying theme.
It is because the default height is 64px.
To change the height you have to actually change the minHeight property.
To do that, I have used inline styling but it works with other methods too.
const toolbarStyle = {
minHeight: '80px',
};
Then in your component simply specify the stylename using style attribute
<Toolbar style={toolbarStyle}>
Hope this helps!!
i too run into a similar issue after some time i put the
min height in AppBar instead of tool bar and it worked here is my code.
return (
<AppBar position="static" sx={{ height: '70px' }} >
<Container >
<Toolbar disableGutters >
</Toolbar>
</Container>
</AppBar>
)
}
Assign minHeight value:
const useStyles = makeStyles((theme) => ({
root: {
flexGrow: 1,
},
toolbar: {
minHeight: '10px',
backgroundColor: 'IndianRed'
}
}));
const classes = useStyles();
Simply specify className in your component:
<Toolbar className={classes.toolbar}>
I had buttons in my toolbar with default margin. That was preventing the Toolbar to get a height of less than 64px. After setting the button margins to 0 the problem was solved for me.
Instead of doing this everywhere:
<Button variant="contained" color="primary"
style={{textTransform: "none"}}
>
Description
</Button>
I just want to write:
<Button>
Description
</Button>
Can I use theme overrides to do this and what would that look like?
Note that I'm trying to override both Material-UI properties and CSS styles. I want to do this globally (i.e. not using withStyles() stuff everywhere).
Or can this only be done by defining some kind of new AppButton component?
Currently using material-ui 3.2.2
You can do this with global overrides for your theme.
Documentation is here https://material-ui.com/customization/themes/#customizing-all-instances-of-a-component-type
Doing it this way will still allow you override the variant on a per component basis as well.
const theme = createMuiTheme({
props: {
// Name of the component ⚛️
MuiButton: {
// The properties to apply
variant: 'contained'
},
},
});
Here's an alternate way to do this, without defining a new component.
Custom components can be awkward when used with Material-UI's JSS styling solution with Typescript. I've found it difficult to define WithStyle types when combining style types from the shared component and the thing using it.
Instead of defining components, it's possible to define sets of default properties that you then apply with the spread operator.
Define and export a standard set of shared props somewhere out in your app:
import {LinearProgressProps} from "#material-ui/core/LinearProgress";
export const linearProps: LinearProgressProps = {
variant:"indeterminate",
color:"primary",
style:{height:"2px"},
};
Then use those props in your app:
<LinearProgress {...linearProps} />
This is then easy to override with custom properties, custom inline styles or JSS generated styles:
<LinearProgress {...linearProps} className={classes.customProgress}
color="secondary" style={{...linearProps.style, width: "100%"}} />
For anyone finding this question, assuming there is no Material-UI way to do this, here's my custom button component.
import * as React from "react";
import {Button} from "#material-ui/core";
import {ButtonProps} from "#material-ui/core/Button";
export class AppButton extends React.Component<ButtonProps, {}>{
render(){
let {style, ...props} = this.props;
return <Button {...props} variant="contained" color="primary"
style={{...style, textTransform: "none"}}
>
{this.props.children}
</Button>
}
}
AppButton.muiName = 'Button';
Does anyone know how to control the location of the popover of SelectField?
I know that selectfield holds a dropdown menu in it and doesn't contain a popover but thought that maybe it's possible to control this somehow.
I actually faced the same issue.
I don't think it's possible, at least it's not part of configurable properties. I looked at SelectField source, and apparently, even though SelectField is using DropDownMenu underneath, and DropDown is using PopOver underneath, but the configuration of anchorOrigin is hardcoded.
https://github.com/callemall/material-ui/blob/master/src/DropDownMenu/DropDownMenu.js#L9
const anchorOrigin = {
vertical: 'top',
horizontal: 'left',
};
It is possible indeed:
<SelectField dropDownMenuProps={{anchorOrigin:{vertical:"center",horizontal:"left"}}}>
<MenuItem value={1} primaryText="one" />
<MenuItem value={2} primaryText="two" />
<MenuItem value={3} primaryText="three" />
</SelectField>
If you need to exactly set up the positioning of your "popover" (which is actually a "dropdown menu"), I reckon you can try by overriding one of the different (style?) props of that menu: http://www.material-ui.com/#/components/dropdown-menu ("Properties" part)
An other way would be to use a popover instead...
Also, the new v1.0 beta just had its select component released ; it might give you a better control:
https://material-ui-1dab0.firebaseapp.com/demos/selects/
Here's how it can be done in material-ui v4.11.3 (early 2021):
<Select
value={10}
MenuProps={{
anchorOrigin: {
vertical: "top",
horizontal: "left",
},
transformOrigin: {
vertical: "bottom",
horizontal: "left",
},
getContentAnchorEl: null,
}}
>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
The getContentAnchorEl: null prop basically positions the rendered Popover such that it sticks to the Select component and does not stray away.
You can over ride the dropdown menu's props by using the prop dropDownMenuProps in your SelectField component.