Develop Reference

Material UI ItemList Trying to bring Icon closer to element

Im trying to bring this - icon closer to the text but i'm not exactly sure how.
When I go into developer mode it shows me this.
I don't know what the purplish stuff means. My end goal is to try to move the icon to the upper right corner of where the "Steve First" box is but I'm not sure how to do that. This is the code where i'm building my list.
<List style={{ display: "flex", flexDirection: "row", padding: 0 }}>
<ListItem
className={classes.removePerson}
secondaryAction={
<IconButton
sx={{
zIndex: "1",
width: "15px !important",
height: "15px !important"
}}
>
<RemoveCircleIcon sx={{ fontSize: "20px" }} />
</IconButton>
}
>
<ListItemAvatar>
<Avatar src="stuff.img" />
</ListItemAvatar>
<ListItemText
className={classes.peopleListSpacing}
primary="Steve First Steve First Steve First"
/>
</ListItem>
<ListItem
className={classes.removePerson}
secondaryAction={
<IconButton
sx={{
zIndex: "1",
width: "15px !important",
height: "15px !important"
}}
>
<RemoveCircleIcon sx={{ fontSize: "20px" }} />
</IconButton>
}
>
<ListItemAvatar>
<Avatar src="stuff.img" />
</ListItemAvatar>
<ListItemText className={classes.peopleListSpacing} primary="Steve First" />
</ListItem>
</List>
The code display this.

The purple space is available space that is not being utilized.
How about just making your ListItemAvatar a flex container and centering it? You might like to right align it, then just add some right margin.
Create a new listItemAvatar prop in your classes object.
display: flex;
justify-content: center;
<ListItemAvatar className={classes.listItemAvatar}>
<Avatar src="..." />
</ListItemAvatar>

How to embed checkbox with label in Card Media?

I tried to code this thing. But the CardMedia will not go together with the checkbox. so responsive is a failure.
<Card>
<CardMedia
component='img'
alt=''
height='160'
image=''
title='Image'
style={{ backgroundColor: '#DEDBDB',
position: 'relative' }}
/>
{/*<input type='checkbox' id='select'*/}
{/* style={{ position: 'absolute', marginLeft: '20%', marginTop: '-2%'}}*/}
{/*/>*/}
{/*<label htmlFor='select'*/}
{/* style={{ position: 'absolute', marginLeft: '21%', marginTop: '-2.15%'}}*/}
{/*>選択</label>*/}
<Box mt={-6} ml={45}>
<span><Checkbox inputProps={{ 'aria-label': 'uncontrolled-checkbox' }} /></span>
</Box>
</Card>
I tried also the FormControlLabel for this so that the label and checkbox will be together and style it with position: absolute and some margins so that the result will be like this.
But the problem is that it is not responsive and if using box label disappear.
Thanks.

Ciao, your problem is connected to the zIndex of the label in FormControlLabel. Infact, if you inspect the page you can see the label present on DOM but invisible (maybe because on CardMedia the image is always on top, but this is my personal opinion).
To solve this problem, you can override the style of the label associated to the FormControlLabel. This is a codesandbox example.
At first I defined a CustomCheckbox:
const CustomCheckbox = withStyles((theme) => ({
root: {
// checkbox style example
// color: "#000000"
// '&$checked': {
// color: "#000000",
// },
},
checked: {}
}))((props) => <Checkbox color="default" {...props} />);
Then, I used it into Card:
<Box mt={-6} ml={45}>
<span>
<FormControlLabel
control={
<CustomCheckbox
checked={cheboxChecked}
onChange={handleChange}
name="toggleFavorite"
/>
}
label="Checkbox label" // label value
classes={{
label: styles.formcontrollabel // label class overriding
}}
/>
</span>
</Box>
And finally in makeStyles I made the override:
const useStyles = makeStyles(() => ({
formcontrollabel: {
"&.MuiFormControlLabel-label": {
zIndex: 1
}
}
}));
The result is:
The label is responsive also (in this case "label" word goes on new line if you reduce screen width) as long as possible (if you continue to reduce screen width, label will be cutted). But this is normal (because you defined Box like <Box mt={-6} ml={45}>). If you don't like this behaviour, you could use a Hidden component to hidden checkbox and label if screen goes under a certain breakpoint like:
<Hidden smDown> // if screen width goes under smDown breakpoint, the Hidden content will be hided
...
</Hidden>

Material UI's CardHeader action styling

I have a CardHeader which has a dropdown within it, I use the to select various options for the table, however currently it looks awful and im not entirely sure how to style it in a more appropriate way, I am using material UI's framework to do this.
formControl: {
flexBasis: 'auto',
position: 'relative'
},
<CardHeader className={classes.cardHeader} classes={{ title: classes.cardHeader }}
avatar={
<Home />
}
action={
<FormControl className={classes.formControl}>
<InputLabel htmlFor="Available Contracts" style={{ marginRight: 20, color: 'white' }}>Contract Type</InputLabel>
<Select
value={contractType.contractObject}
onChange={handleChange}
inputProps={{
name: 'contractObject',
id: 'contractObject',
}}
>
<MenuItem value={10}>Local Contract</MenuItem>
<MenuItem value={20}>Framework Contract</MenuItem>
</Select>
</FormControl>
}
/>
A screen shot below of the table
As you can see the Contract Type is currently on the right, I would like this on the left next to the Home icon if possible, any ideas?

The 'Card' component has further sub components - 'CardHeader', 'CardContent'.
To style the CardHeader for instances, the API indicates that you can do the following:
import React from 'react';
import { makeStyles } from '#material-ui/styles';
import {
Card, CardContent, CardHeader, Divider
} from '#material-ui/core';
const useStyles = makeStyles(theme => ({
action: {
margin: 0
}
}))
const CustomerInfoCards = ({ customer }) => {
const classes = useStyles();
return (
<Card>
<CardHeader
action={
<p>{customer._id}</p>
}
classes={{ action: classes.action }}
className={classes.action}
subheader={customer.email}
title={customer.name}
/>
<Divider />
<CardContent>
<h2>Some text</h2>
</CardContent>
</Card>
)
}
export default CustomerInfoCards
Main thing here is classes={{ action: classes.action }} - which removes the default margin top and right of 8px for the action prop.
Take a look at the API link above to know the various CSS exposed by material-ui and have fun styling!

In your styling for formControl add a new property flex and have its value as flex: "0 1 auto",
formControl: {
flexBasis: 'auto',
position: 'relative',
flexgrow: '1',
flex: '0 1 auto',
}
Hope this helps. flex usually adjust the component to relative right of the earlier component.
Read more: CSS flex on W3Schools

inline styles for tabs in material ui doesn't change color

I am new to material ui and am trying to change the colors for the selected tab.
Right now it's dark blue in color and I am trying to change it to red.
I gave the inline styles, but it's not changing. Can you tell me how to fix it?
I am providing my sandbox and code snippet below
https://codesandbox.io/s/yqj5q8v461
<Tabs
value={value}
onChange={this.handleChange}
scrollable
scrollButtons="on"
indicatorColor="primary"
textColor="primary"
>
<Tab
label="Search"
icon={<PhoneIcon />}
style={{ border: "red" }}
/>
<Tab
favorites={favorites}
label="Favorites"
icon={<FavoriteIcon />}
/>
</Tabs>

you can override the styles of tabs using CSS API,
as an example:
<Tabs
value={value}
onChange={this.handleChange}
scrollable
scrollButtons="on"
classes={{ indicator: classes.tabsIndicator }}
>
<Tab
label="Search"
icon={<PhoneIcon />}
classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
/>
<Tab
favorites={favorites}
label="Favorites"
icon={<FavoriteIcon />}
classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
/>
</Tabs>
then I have added styles as:
const styles = theme => ({
root: {
flexGrow: 1,
width: "100%",
backgroundColor: theme.palette.background.paper
},
tabsIndicator: {
backgroundColor: "red"
},
tabRoot: {
"&:hover": {
color: "red",
opacity: 1
},
"&$tabSelected": {
color: "red",
fontWeight: theme.typography.fontWeightMedium
},
"&:focus": {
color: "red"
}
},
tabSelected: {}
});
here is a working example from your code: https://codesandbox.io/s/882o65xlyl
hope this will help you

Try this: border: '1px solid red'

if you interested other design framework, I recommend you Ant-design.
You can check for the inform here

Material-UI: Full width List inside of Grid

Using material-ui I am trying to make a <List /> inside of a <Grid /> column. I want the list to scroll on overflow but also take up the width of the grid it is in. I can get both of these to work but not at the same time. the first section with the <Grid /> is the overflowY functioning properly but without the full width of the <ListItem />:
const styles = theme => ({
root: {
flexGrow: 1,
},
list: {
flexGrow: 1,
position: 'absolute',
overflow: 'auto',
bottom: '1em',
top: '1em',
},
})
...
<Grid item xs>
<List classes={{ root: classes.list }}>
{genereateData(35).map(item => (
<ListItem button>
<ListItemText primary={item} />
</ListItem>
))}
</List>
</Grid>
...
<List classes={{ root: classes.root }}>
but if I switch the line to the last little bit of code above the full width part works. So why would the flexGrow: 1 work in the root prop but not the list prop, and is there a way to get both? I assume it has to do with position: absolute but I cannot get rid of that. Just looking for a way to get both.
Here is a codesandbox!