I'm just starting to use material ui and having a hard time trying to style the active list item of a sidebar menu. Here's what I've tried so far. What am I missing or doing wrong?
<>
<ListItemButton onClick={i.onClick}>
<Icon/>
<ListItemText primary={i.listItemText} />
</ListItemButton>
<Collapse in={open} timeout='auto' unmountOnExit>
<List component='div' disablePadding>
{i.nestedItems?.map((n, idx) => (
<ListItemButton sx={{ pl: '4.3rem' }}>
<ListItemText
primary={i.nestedItems[idx]}
/>
</ListItemButton>
))}
</List>
</Collapse>
</>
))}
I've tried styling it in them theme like som but it doesn't work:
styleOverrides: {
root: {
"&:focus": {
fontWeight: baseTheme.typography.fontWeightBold
},
},
},
}
Related
I'm trying to add styling to child components of a React Native View. Since you cant use the > * selector in React Natives StyleSheet.create function how do you achieve this result?
Here is the code of a form I want to style:
<View style={styles.container}>
<View style={styles.centered}>
<Button mode="contained" onPress={onAddItem} style={styles.default}>
Add Item
</Button>
</View>
{showForm ? (
<View style={styles.form}>
<TextInput
label="Title"
returnKeyType="next"
theme={{ colors: { primary: 'blue',underlineColor:'transparent',}}}
style={{ width: 300 }}
value={title.value}
onChangeText={(text) => setTitle({ value: text, error: '' })}
error={!!title.error}
errorText={title.error}
autoCapitalize="none"
/>
<DropDownPicker
label="Select Type"
open={open}
value={value}
items={items}
setOpen={setOpen}
setValue={setValue}
setItems={setItems}
/>
<DropDownPicker
open={open2}
value={value2}
items={condition}
setOpen={setOpen2}
setValue={setValue2}
setItems={setCondition}
/>
<TextInput
label="Quantity"
returnKeyType="next"
theme={{ colors: { primary: 'blue',underlineColor:'transparent',}}}
style={{ width: 300 }}
value={quantity.value}
onChangeText={(text) => setQuantity({ value: text, error: '' })}
error={!!quantity.error}
errorText={quantity.error}
autoCapitalize="none"
/>
</View>
) : null}
</View>
I'm attempting to keep the icon button center aligned, but something isn't working right. Adding left: "0.5rem" to sx prop is pushing the button icon further. I'm trying not to use makeStyles to override the position. Any tip/direction would be helpful :)
Sandbox link
You can try using style:
<Stack direction="row" style={{display:"flex", justifyContent:"center", alignItems:"center"}}>
<Tooltip title="Delete">
<Button sx={{ minWidth: 0 }} startIcon={<DeleteIcon />} />
</Tooltip>
<Divider orientation="vertical" flexItem />
<Tooltip title="Send">
<Button sx={{ minWidth: 0 }} startIcon={<SendIcon />} />
</Tooltip>
<Tooltip title="Headset">
<Button sx={{ minWidth: 0 }} startIcon={<HeadsetMicOutlined />} />
</Tooltip>
<Divider orientation="vertical" flexItem />
</Stack>
In case you want to set it in you theme here is how you can do it so you don't have to do it in every Button component.
export const theme = createTheme({
...
components: {
MuiButton: {
styleOverrides: {
startIcon: {
margin: '0'
},
},
}
},
});
I have an imagelist and I want to render buttons below the images
This is my code so far;
export const Media = (stuff) => {
const { medias } = stuff;
console.log(medias);
const classes = useStyles();
return (
<div className={classes.root}>
<ImageList className={classes.imageList} gap={2} cols={3}>
{medias.map((media) => (
<ImageListItem key={media.cover_photo_url}>
<img
src={media.cover_photo_url}
className={classes.image}
style={{ borderRadius: "15px" }}
/>
<PlayArrowIcon className={classes.overlay} />
<ImageListItemBar subtitle={<LinkIcon></LinkIcon>} position="below"/>
</ImageListItem>
))}
</ImageList>
{medias.map((item) => (
<Buttons item={item} />
))}
</div>
);
};
I can display the buttons with the map function below however it doesnt scroll with the image that is relative with it horizontally
how can i make the buttons stick together with the images?
Thanks
you can try using <Box> like this
import Box from '#material-ui/core/Box';
<Box>
<ImageListItem key={media.cover_photo_url}>
<img
src={media.cover_photo_url}
className={classes.image}
style={{ borderRadius: "15px" }}
/>
<PlayArrowIcon className={classes.overlay} />
<ImageListItemBar subtitle={<LinkIcon></LinkIcon>} position="below"/>
</ImageListItem>
<Buttons item={item} />
</Box>
Just Remove Second loop for buttons and bring button tag in first loop and wrapper ImageListItem and Button with a div
Replace this,
{medias.map((media) => (
<ImageListItem key={media.cover_photo_url}>
<img
src={media.cover_photo_url}
className={classes.image}
style={{ borderRadius: "15px" }}
/>
<PlayArrowIcon className={classes.overlay} />
<ImageListItemBar subtitle={<LinkIcon></LinkIcon>} position="below"/>
</ImageListItem>
))}
</ImageList>
{medias.map((item) => (
<Buttons item={item} />
))}
With this,
{medias.map((media) => (
<Box>
<ImageListItem key={media.cover_photo_url}>
<img
src={media.cover_photo_url}
className={classes.image}
style={{ borderRadius: "15px" }}
/>
<PlayArrowIcon className={classes.overlay} />
<ImageListItemBar subtitle={<LinkIcon></LinkIcon>} position="below"/>
</ImageListItem>
<Buttons item={media} />
</Box>
))}
You can Import the Box by using this
import Box from '#material-ui/core/Box';
I'm using Material UI with a drawer.
Inside the drawer, is a set of Collapsible lists. When I expand the list, the list text items can be quite long, and the drawer jumps out much wider.
I would like the drawer to have a width that is 30% of the window size, but when I try to set the classes on the drawer, neither root nor modal classNames seem to hold the drawer width in place.
This is the Drawer code:
<Drawer classes={drawerClasses} open={showStandardDrawer} anchor={"right"} onClose={closeDrawer}>
{Array.from(items).map((item, index) => {
return (
<List
key={`list-${index}`}
component="div"
aria-labelledby="nested-list-subheader"
subheader={
<ListSubheader component="div" id="nested-list-subheader">
{item.title}
</ListSubheader>
}
className={classes.root}
>
{ item.elements.map((el, index) => {
return (
<React.Fragment key={index}>
<ListItem key={index} button onClick={() => handleExpand(index)}>
<ListItemText primary={el.name} />
{open[index] ? <ExpandLess /> : <ExpandMore />}
</ListItem>
<Collapse in={open[index]} timeout="auto" unmountOnExit>
{ el.descriptions.map((description, index) => {
return (
<List key={`l-${index}`} component="div" disablePadding>
<ListItem button className={classes.nested} >
<ListItemIcon>
<StarBorder />
</ListItemIcon>
<ListItemText primary={description} primaryTypographyProps={{noWrap:true, width:'200px'} } />
</ListItem>
</List>
)})
}
</Collapse>
</React.Fragment>
)
})}
</List>
)
})}
</Drawer>
and these are the classes applied to the drawer ('drawerClasses'):
{
root: {
maxWidth: '200px',
minWidth: '50%',
width: '50%',
overflow: 'hidden'
},
modal: {
maxWidth: '50%',
minWidth: '50%',
width: '50%'
}
}
These aren't the styles I necessarily want, I'm just trying to see if I can get Drawer to size itself instead of sizing around its children.
Instead of modal, use the paper class. The Paper element within the drawer is the main visible container. The root and modal classes are applied to wrapper elements that are positioned in such a manner that their widths won't necessarily affect the Paper width.
Here's a code excerpt from the Permanent drawer demo:
const useStyles = makeStyles(theme => ({
drawer: {
width: drawerWidth,
flexShrink: 0,
},
drawerPaper: {
width: drawerWidth,
},
}));
...
<Drawer
className={classes.drawer}
variant="permanent"
classes={{
paper: classes.drawerPaper,
}}
anchor="left"
>
https://codesandbox.io/s/zxljh
I want to left-align the text of my list items. I also want to make all the icons the same size. The size of the envelope icon used with the Gmail list item. Currently, I have this:
How can I accomplish this?
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '#material-ui/core/styles';
import List from '#material-ui/core/List';
import ListItem from '#material-ui/core/ListItem';
import ListItemIcon from '#material-ui/core/ListItemIcon';
import ListItemText from '#material-ui/core/ListItemText';
import DraftsIcon from '#material-ui/icons/Drafts';
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome';
import { faFacebook, faGoogle, faGooglePlus, faTwitter, faYoutube, } from '#fortawesome/free-brands-svg-icons';
const styles = theme => ({
root: {
width: '100%',
maxWidth: 360,
backgroundColor: theme.palette.background.paper,
},
container: {
width: '20px', // this does not work
}
});
function SimpleList(props) {
const { classes } = props;
return (
<div className={classes.root}>
<List component="nav">
<ListItem button>
<ListItemIcon className="container">
<FontAwesomeIcon icon={faGoogle} />
</ListItemIcon>
<ListItemText primary="Login with Google" />
</ListItem>
<ListItem button>
<ListItemIcon className="container">
<FontAwesomeIcon icon={faTwitter} />
</ListItemIcon>
<ListItemText primary="Login with Twitter" />
</ListItem>
<ListItem button>
<ListItemIcon className="container">
<DraftsIcon />
</ListItemIcon>
<ListItemText primary="Login with Gmail" />
</ListItem>
<ListItem button>
<ListItemIcon className="container">
<FontAwesomeIcon icon={faFacebook} />
</ListItemIcon>
<ListItemText primary="Login with Facebook" />
</ListItem>
<ListItem button>
<ListItemIcon className="container">
<FontAwesomeIcon icon={faYoutube} />
</ListItemIcon>
<ListItemText primary="Login with Youtube" />
</ListItem>
<ListItem button>
<ListItemIcon className="container">
<FontAwesomeIcon icon={faGooglePlus} />
</ListItemIcon>
<ListItemText primary="Login with Google Plus" />
</ListItem>
</List>
</div>
);
}
SimpleList.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(SimpleList);
Using fontSize CSS on the FontAwesomeIcon and DraftsIcon should do the trick. You most likely will also need to override any default padding and margin on the icons.
...
const styles = theme => ({
root: {
width: '100%',
maxWidth: 360,
backgroundColor: theme.palette.background.paper,
},
faIcon: {
fontSize: 18,
// padding if needed (e.g., theme.spacing.unit * 2)
// margin if needed
},
muiIcon: {
fontSize: 18,
// padding if needed
// margin if needed
}
});
class SimpleList extends React.Component {
render() {
const { classes } = this.props;
const list = [
{
label: 'label 1',
icon: <FontAwesomeIcon className={classes.faIcon} icon={faTwitter} />
},
{
label: 'label 2',
icon: <DraftsIcon className={classes.muiIcon} />
}
];
return <div className={classes.root}>
<List component='nav'>
{
list.map((item, key) => (
<ListItem button>
<ListItemIcon>
{ item.icon }
</ListItemIcon>
<ListItemText primary={ item.label } />
</ListItem>
))
}
</List>
</div>;
}
}
SimpleList.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(SimpleList);