I want this icon to show up in the middle of the Material UI chip , nice and centered. Right now there's a weird whitespace next to it:
<Chip
avatar={<LinkAvatarImage socialTypeId={link.socialTypeId} />}
size="small"
variant="outlined"
/>
export function LinkAvatarImage({ socialTypeId } : { socialTypeId: number }) {
if (socialTypeId === socialTypes.PERSONAL_WEBSITE) {
return <WebIcon />;
}
...
I don't know how to tweak Material UI's Chip to do so.
I tried this but no luck:
export const useStyles = makeStyles((theme: Theme) =>
createStyles({
chip: {
alignItems: 'center',
justifyContent: 'center',
}
}),
);
const classes = useStyles();
<Chip
avatar={<LinkAvatarImage socialTypeId={link.socialTypeId} />}
size="small"
classes={classes.chip}
variant="outlined"
/>
but I also don't see a way to inject a custom style via the props on Chip. There doesn't seem to be a property to let me do that in the first place. I think there's a classes prop but I don't understand how to set that in this case.
use display: flex
export const useStyles = makeStyles((theme: Theme) =>
createStyles({
chip: {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}
}),
);
const classes = useStyles();
<Chip
avatar={<LinkAvatarImage socialTypeId={link.socialTypeId} />}
size="small"
classes={classes.chip}
variant="outlined"
/>
@Techuila (thanks!) helped me in a bit of the direction. Here is what worked for me:
<Chip
...
style={{
width: '40px',
height: '30px',
paddingLeft: '15px',
margin: '5px'
}}
/>
it's an inline style but at this point who cares, it works.
I had the same problem too, my workaround is I added a style on my own css file that selects the MuiChip-icon.
App.css
.MuiChip-avatar {
width: 24px;
height: 24px;
margin-left: 5px;
margin-right: -6px;
}
I also think that I missed something but for now I still use this solution.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.