I'm having a hard time applying a color to the indeterminate state of my checkboxes. When fully selected, the checkbox properly displays as the secondary color. Any suggestions on what I'm doing wrong to target the indeterminate state and change its color?
const styles = {
root: {
'&$indeterminate': {
color: 'red',
},
},
indeterminate: {},
};
...
<ListItem
dense
button
key={this.props.key}
className={this.props.className}
disabled={this.props.disabled}
onClick={this.props.onClick}
>
<Checkbox
indeterminate={this.props.indeterminate}
classes={{
root: classes.root,
indeterminate: classes.indeterminate,
}}
disableRipple
tabIndex={-1}
disabled={this.props.disabled}
checked={this.props.checked}
/>
<ListItemText inset primary={this.props.text} />
{ hasChildren ? <ExpansionIcon onClick={this.onExpansionItemClick} /> : null }
</ListItem>
I did it this way based on the documentation here: https://material-ui.com/customization/overrides/#overriding-with-classes
Thanks for your help!
I've found the proper way to implement this. Instead of selecting the root and changing the color, you tell the Checkbox what icon to use and apply a class to the icon.
<Checkbox
indeterminate={this.props.indeterminate}
indeterminateIcon={<IndeterminateCheckBoxIcon className={classes.root} />}
disableRipple
tabIndex={-1}
disabled={this.props.disabled}
checked={this.props.checked}
/>
Related
I'm designing a react-admin table, and I want to determine a row's background color by the "active" source of the row - if it's true I want the row background color to be green, otherwise I want it to be red.
I tried material ui's "makeStyles" with no success (all of this stuff is new to me).
This is my table:
const myTable = (props) => {
return (
<List {...props} pagination={<PostPagination />}>
<Datagrid>
<NumberField source="id" />
<TextField source="name" />
<TextField source="category" />
<TextField source="platform" />
<NumberField source="major" />
<NumberField source="minor" />
<BooleanField source="active" label="active"/>
<DateField source="audit" />
<EditButton basePath="versions" />
<DeleteButton basePath="versions" />
</Datagrid>
</List>
)
}
Thank you very much for any help!
Good afternoon, i didn't really understand that you have strings here, but there are many different options for example:
<MyRow style={{background: (isActive ? 'red' : 'green')} />
<MyRow className={isActive ? classes.activeRow : null />
In the first variant, you do not need to do anything with the styles, and in the second you will have to create a style for example through makeStyles.
const useStyles = makeStyles((theme) => ({
activeRow:{
backgroundColor: theme.palette.primary.main
}
}));
To show the search Icon on TextField, this is what I've been doing:
<TextField
size="small"
id="searchCandidate"
data-testid="searchCandidate"
label={textLabel}
variant="outlined"
fullWidth
onChange={onChange}
onBlur={onBlur}
className={classes.searchBar}
InputLabelProps={{
classes: {
focused: classes.cssFocused
}
}}
InputProps={{
classes: {
root: classes.cssOutlinedInput,
focused: classes.cssFocused,
notchedOutline: classes.notchedOutline
},
endAdornment: inputAdornment
}}
/>
And
const inputAdornment = showSearchIcon ? (
<InputAdornment>
<IconButton style={{padding: 0}} aria-label={textLabel}>
<SearchIcon data-testid="search_message" />
</IconButton>
</InputAdornment>
) : null;
So a search icon appears in the textfield due to the inputAdornment. However, if I click on the icon, the input doesn't get clicked. I should probably provide an onclick to IconButton and handle thorugh that. Or is there a simpler way to do this?
I'm struggling to override the default padding of the Select component to match the size of my other text fields. I understand that I need to modify nested components but have been unable to find a working solution.
<div className='wifi-chooser-column'>
<TextField
style={{margin: '6px'}}
label='SSID'
variant='outlined'
size='small'
/>
<Select
style={{margin: '6px', padding: '0px'}}
variant='outlined'
value={this.state.security}
onChange={(event) => this.setState({security: event.target.value})}
classes={{
select: {
padding: '10.5px 14px'
}
}}
>
<MenuItem label='security' value='Unsecured'>Unsecured</MenuItem>
<MenuItem value='WEP'>WEP</MenuItem>
<MenuItem value='WPA2'>WPA2</MenuItem>
</Select>
<TextField
style={{margin: '6px'}}
label='Username'
variant='outlined'
size='small'
/>
<TextField
style={{margin: '6px'}}
label='Password'
variant='outlined'
size='small'
/>
Layout issue
According to the doc, there are several ways that we can override the material UI component styles.
If we want to override the padding of the Select components differently and occasionaly, or if this process would not be repeated in the entire project, we can simply use Overriding styles with classes approach. In this way, first we need to create our desired padding for Select component by makeStyles as below:
const useStyles = makeStyles((theme) => ({
rootFirstSelect: {
padding: "4px 0px"
},
rootSecondSelect: {
padding: "10px 80px"
}
}));
and then assign it to the classes prop of the component, by modifying the root element:
const classes = useStyles();
//Other part of the code
return (
//Other part of the code
<Select
classes={{ root: classes.rootFirstSelect }}
//other props
>
//Other part of the code
)
working sandbox example for this method
If we want to override the padding of the Select component for the whole project, Global theme variation would prevent repetition. In this way, we should create a theme by createMuiTheme, as below, and apply our desired changes there:
const theme = createMuiTheme({
overrides: {
MuiSelect: {
select: {
padding: "4px 0px 10px 130px !important"
}
}
}
});
then pass this theme as a prop to the ThemeProvider component which surround the whole project:
<ThemeProvider theme={theme}>
<Demo />
</ThemeProvider>
working example in sandbox
I found an alternative way in the docs, that's easier to use for me: instead of using Select component, I use TextField with "select" props
cf: https://material-ui.com/components/text-fields/#select
<TextField
id="standard-select-currency"
select
label="Select"
value={currency}
onChange={handleChange}
helperText="Please select your currency"
>
{currencies.map((option) => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))}
</TextField>
Which allows you to access TextField props such as margin="none", margin="dense"
I have this render function:
render() {
const {classes} = this.props
return (
<Paper className={classes.root} elevation={4}>
<Typography type="title" className={classes.title}>
All Users
</Typography>
<List dense>
{this.state.users.map((item, i) => {
const photoUrl = item._id
? `/api/users/photo/${item._id}?${new Date().getTime()}`
: '/api/users/defaultphoto'
return <Link to={"/user/" + item._id} key={i}>
<ListItem button>
<ListItemAvatar>
<Avatar src={photoUrl} className={classes.bigAvatar}/>
</ListItemAvatar>
<ListItemText primary={item.name}/>
<ListItemSecondaryAction>
<IconButton>
<ArrowForward/>
</IconButton>
</ListItemSecondaryAction>
</ListItem>
</Link>
})
}
</List>
</Paper>
)
}
}
When I Initially load the page the below blue dot appears to the left of each user:
If I then click a link to another page and then the browser back arrow to return to the Users page the user list appears without the blue dot:
I would prefer if the blue dot never appears. How do I do this?
I faced the same problem today using ListItem component from react material ui v4.6.0.
The default list style type value of disc will be displayed if "ListItemSecondaryAction" component is used as the last child of "ListItem" component.
According to the React Material UI Docs, the value of ContainerComponent prop will be set to 'li' when ListItemSecondaryAction is used as the last child.
Changing the value of ContainerComponent prop to other elementType such as 'div' fixed the issue.
<ListItem button ContainerComponent="div">
<ListItemAvatar>
<Avatar src={photoUrl} className={classes.bigAvatar} />
</ListItemAvatar>
<ListItemText primary={item.name} />
<ListItemSecondaryAction>
<IconButton>
<ArrowForward />
</IconButton>
</ListItemSecondaryAction>
</ListItem>
I assume somewhere in the nested components you have a li of some sort.
The dots are from html list bullet points and can be removed by adding the following css:
ul {
list-style-type: none !important;
}
If the component is a part of the Material-UI library, you might need to add !important
I am developing a web app using the ReactJS framework.
I am trying to write an event that when I click on one element in a set it changes the value of the selected attribute to true and sets the remaining elements to false.
<NavigationButton to="/" label="Dashboard" exact>
<MenuItem className={classes.menuItem} selected={true/false}>
<ListItemIcon className={classes.icon}>
<Home />
</ListItemIcon>
<ListItemText classes={{ primary: classes.primary }} inset primary="Strona główna" />
</MenuItem>
</NavigationButton>
<NavigationButton to="/payment" label="Payment" exact>
<MenuItem className={classes.menuItem} selected={true/false}>
<ListItemIcon className={classes.icon}>
<Payment />
</ListItemIcon>
<ListItemText classes={{ primary: classes.primary }} inset primary="Moje płatności" />
</MenuItem>
</NavigationButton>
How do I do this?
I think the best way to do this is to encompasses all of your components in a stateful component that will track which of your elements is selected or not. This component will then have a function (something like handleClick) that will take in that press button class and setState changing to the element that should be selected now. Now you can pass down the function and the state (what is currently suppose to be selected) as props to the children elements and onClick on, it will trigger a callback to the parent component telling it to setState. Then in each of the individual components, you can just check to see if the prop this.props.currentSelect === ${name of the element} to see if they element should be selected or not
// some jsx file
class StatefulComponent extends React.Component{
constructor(props){
super(props);
this.state = {
currentlySelect: "someMenuItem"
}
this.handleClick = this.handleClick.bind(this);
}
handleClick(str){
this.setState({
currentlySelect: str
})
}
render(){
return(
<React.Fragment>
<NavigationButton to="/" label="Dashboard" exact>
<MenuItem handleClick={this.handleClick} currentlySelect={this.state.currentlySelect} className={classes.menuItem} selected={true / false}>
<ListItemIcon className={classes.icon}>
<Home />
</ListItemIcon>
<ListItemText classes={{ primary: classes.primary }} inset primary="Strona główna" />
</MenuItem>
</NavigationButton>
<NavigationButton to="/payment" label="Payment" exact>
<MenuItem handleClick={this.handleClick} currentlySelect={this.state.currentlySelect} className={classes.menuItem} selected={true / false}>
<ListItemIcon className={classes.icon}>
<Payment />
</ListItemIcon>
<ListItemText classes={{ primary: classes.primary }} inset primary="Moje płatności" />
</MenuItem>
</NavigationButton>
</React.Fragment>
)
}
}