I'm working with the Accordion component from Material-UI (https://material-ui.com/api/expansion-panel-summary/). It seems like by default, regardless of what I do, the text (specifically the word 'Filter' which appears in AccordionSummary) is aligned to the left. How can I change this so it aligned to the right?
<Accordion>
<AccordionSummary expandIcon={<FilterListIcon style={{color: 'white'}} />}
style={{backgroundColor: 'black', color: 'white', textAlign: "right"}}>
Filter
</AccordionSummary>
<AccordionDetails style={{backgroundColor: 'black', color: 'white'}}>
//Some details here
</AccordionDetails>
</Accordion>
The AccordionSummary component primarily uses flex containers so textAlign won't do that work for you. You can use justifyContent instead. You may target the content rule name to specifically target the content (i.e., your Filter text) of AccordionSummary
const useStyles = makeStyles({
customAccordionSummary: {
justifyContent: "flex-end"
}
})
function App() {
const classes = useStyles();
return (
<Accordion>
<AccordionSummary
classes={{ content: classes.customAccordionSummary }}
...
Related
I'm new to using Material UI and have integrated into my portfolio website to create an ImageList that redirect to other projects I'd like to show possible employers. I'm having trouble editing the style of the text inside ImageListItemBar. I've tried using the primaryTypographyProps and sx to no avail. Could someone point me in the right direction?
<Typography variant="h3" color="common.red">
<ImageListItemBar
primaryTypographyProps={{fontSize: '30px'}}
sx={{
background: 'black',
}}
position="bottom"
title={item.title}
/>
</Typography>
//tried this as well
<ImageListItemBar
sx={{
color: '#000';
background: 'black',
}}
position="bottom"
title={item.title}
/>
Here is the code You are after:
<ImageListItemBar
title="image title"
subtitle="image subtitle"
sx={{
"& .MuiImageListItemBar-title": { color: "red" }, //styles for title
"& .MuiImageListItemBar-subtitle": { color: "yellow" }, //styles for subtitle
}}
/>
I recommend studying official MUI docs for ImageList and ImageListItemBar API
Hamed's answer is correct, you need to target the specific class applied to the title in order to style it.
I've been developing a pattern of doing this lately, where you can import the component's classes and style accordingly using styled. This allows you to use your IDE to autocomplete the class names and target them accordingly.
const StyledImageListItemBar = styled(ImageListItemBar)(() => ({
[`& .${imageListItemBarClasses.title}`]: {
color: "red"
},
[`& .${imageListItemBarClasses.subtitle}`]: {
color: "yellow"
},
backgroundColor: "black"
}));
Then you can just use the component without having to resort to sx:
export default function App() {
return (
<StyledImageListItemBar
title="This is a title"
subtitle="This is a subtitle"
/>
);
}
Here's a sandbox of this in action if you want to play with it: https://codesandbox.io/s/mui-targetting-classes-8y5kpm?file=/src/App.js
That being said, if you're planning to reuse this component with the custom styling, I would consider overriding the default styling in theme too.
I'm trying to implement an Accordion component with Material UI.
The problem I'm facing is that a gray line is automatically inserted above the component although I prefer white background. How can I remove it? Here is demo code.Material UI accordion component demo
With the release of Material-UI v5.0.0-beta.0, custom styling has become much easier via use of the new sx prop.
The sx prop may be used on all Material-UI components as of v5. In our world, this has eliminated the need for hack-ish style overrides and custom classes.
Here's how to remove the "line above the accordion" with the sx={} prop.
return (
<Accordion
disableGutters
elevation={0}
sx={{
'&:before': {
display: 'none',
}
}}>
<AccordionSummary expandIcon={<ExpandMore/>}>
...your summary here...
</AccordionSummary>
<AccordionDetails sx={{ maxWidth: '480px' }}>
...your details here...
</AccordionDetails>
</Accordion>
);
Note that I've passed the sx prop to <AccordionDetails/> as well.
You must pass an object to sx so you're always going to have a double set of curly braces...
sx={{ borderBottom: '1px solid #dddddd', borderRadius: '4px' }}
To make gray line white you have to override the css classes of Accordion element.
The grey line comes from .MuiAccordion-root:before style. So at first change Accordion props adding classes props like:
...
<Accordion
elevation={0}
classes={{
root: classes.MuiAccordionroot
}}
>
...
And then on your useStyles add:
MuiAccordionroot: {
"&.MuiAccordion-root:before": {
backgroundColor: "white"
}
}
and grey line becames white. Here your code modified.
Try adding some css file and access this class MuiAccordion-root:before and change it's height to 0px. It's the pseudo-element that's showing the gray line above the Accordian.
// in my TS project i did it like this:
const useStyles = makeStyles((theme: Theme) =>
createStyles({
test: {
'&:before': {
display: 'none',
},
);
<Accordion
classes={{
root: classes.test,
}}
expanded={expanded}
>
To remove line between Accordion summary and Accordion details you just need to pass borderBottom='none !important'
const useStyles = makeStyles({
Summary:{
borderBottom:'none !important'
});
const AccordionComp=()=>{
const classes = useStyles();
return(
<Accordion>
<AccordionSummary className={classes.Summary}>
......
</AccordionSummary>
<AccordionDetails>......</AccordionDetails>
</Accordian>
)}
export default AccordionComp;
You can wrap the Accordion component in a div and it will remove the line. It comes from a :before property that I imagine is helpful when you have more than one in a row to visually divide.
Is it possible to add arrow to material UI popover component?
Thanks,
I think this is what you want (Without using popper Component)
You will need to override background color of Popover's child component i.e. paper with transparent color;
Using psudo element of Box Component to create an arrow element.
import * as React from "react";
import Popover from "#mui/material/Popover";
import Typography from "#mui/material/Typography";
import Button from "#mui/material/Button";
import Box from "#mui/material/Box";
export default function BasicPopover() {
const [anchorEl, setAnchorEl] = React.useState(null);
const handleClick = (event) => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
const open = Boolean(anchorEl);
const id = open ? "simple-popover" : undefined;
return (
<div style={{ width: 400, height: 200, backgroundColor: "lightblue" }}>
<Button aria-describedby={id} variant="contained" onClick={handleClick}>
Open Popover
</Button>
<Popover
id={id}
open={open}
anchorEl={anchorEl}
onClose={handleClose}
anchorOrigin={{
vertical: "bottom",
horizontal: "left"
}}
PaperProps={{
style: {
backgroundColor: "transparent",
boxShadow: "none",
borderRadius: 0
}
}}
>
<Box
sx={{
position: "relative",
mt: "10px",
"&::before": {
backgroundColor: "white",
content: '""',
display: "block",
position: "absolute",
width: 12,
height: 12,
top: -6,
transform: "rotate(45deg)",
left: "calc(50% - 6px)"
}
}}
/>
<Typography sx={{ p: 2, backgroundColor: "white" }}>
The content of the Popover.
</Typography>
</Popover>
</div>
);
}
Here is working Demo: basic Popover With Arrow
If you'd like to use a Popper instead, then the following sandbox has a component you should be able to copy straight into your codebase (typescript): RichTooltip. The standard Tooltip was not that suited to rich content for our project and did not allow buttons, selecting text, etc.
https://codesandbox.io/s/popper-with-arrow-58jhe
If you want arrow to a button which open popover you can just put html for arrow there.
<Button aria-describedby={id} variant="contained" color="primary" onClick={handleClick}>
Open Popover <img src="//path-for-arrow-image" />
</Button>
<Popover {...propsOfPopover}> {children} </Popover>
I want to change the title in CardHeader to 16px. I tried changing theme in App.js but it does not seem to work
const theme = createMuiTheme({
typography: {
useNextVariants: true,
overrides: {
MuiCardHeader: {
titleTypographyProps: {
variant:'h2'
}
}
}
}
);
In the component:
<CardHeader
action={
<IconButton color="inherit">
<MoreHorizIcon />
</IconButton>
}
title="Titletext"
/>
The title font still does not change. What do I need to do to fix this?
you cant target the header class or id and change fontSize or
pass as props
titleTypographyProps={{variant:'h1' }}
that object acepts:'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'subtitle1', 'subtitle2', 'body1', 'body2', 'caption', 'button', 'overline', 'srOnly', 'inherit', "display4", 'display3', 'display2', 'display1', 'headline', 'title', 'subheading'
in your code it would be
<CardHeader
action={
<IconButton color="inherit">
<MoreHorizIcon />
</IconButton>
}
titleTypographyProps={{variant:'h1' }}
title="Titletext"
/>
I know this is quite old post now, but for future references anyone who stumbles upon this question might take a look at: https://github.com/mui-org/material-ui/issues/7521
Basically, we can use the classes property, which takes key/value pairs, and can add style to parts of the <ContentHeader /> component based on that.
Example:
const useStyles = makeStyles({
root: {
minWidth: 300,
maxWidth: 500,
margin: "10px 15px 10px 0",
},
headerTitle: {
maxWidth: 300
}
});
const CustomizedCard = () => {
const materializeUIClasses = useStyles();
return (
<Card className={materialUIClasses.root}>
<CardHeader
title={title}
// Here we can target whatever part we need: title, subtitle, action
classes={{
title: materialUIClasses.headerTitle
}}
/>
</Card>
}
this piece of code worked for me:
<CardHeader
title={
<Typography gutterBottom variant="h5" component="h2">
/* Content goes here */
</Typography>
} />
notes: package: "#material-ui/core": "^4.5.2"
I use this solution because I make use of makeStyles module.
In MUI v5, you make use of system properties in Typography by adding a fontSize prop directly in titleTypographyProps or subheaderTypographyProps:
<CardHeader
titleTypographyProps={{
fontSize: 22,
}}
subheaderTypographyProps={{
fontSize: 10,
}}
title="Shrimp and Chorizo Paella"
subheader="September 14, 2016"
/>
Live Demo
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