I have taken a look at other threads relating to this but unfortunately I am not able to change the material ui default red checked colour.
Here is my code below:
return (
<FormControl>
<FormLabel>{label}</FormLabel>
<RadioGroup row
name={name}
value={value}
onChange={onChange}
{
items.map(
item => (
<FormControlLabel key={item.id} value={item.id} control={<Radio />} label={item.title} />
)
)
}
</RadioGroup>
</FormControl>
)
I simply want to be able to change the checked radio color from red to blue.
I have tried the following but didn't work:
<Radio
{...props}
sx={{
'&, &.Mui-checked': {
color: 'blue',
},
}}
/>
Because you use 2 selectors - & and &.Mui-checked you overwrite the color of your checkbox in an unchecked state. Therefore, you should get rid of & and everything will work fine:
<Radio
{...props}
sx={{
color: "red",
"&.Mui-checked": {
color: "green"
}
}}
/>
Demo
Related
I'm facing a problem that I seem to know but I don't know. I made "State" by [checked]. There is a problem that if you turn this to the map and click only one checkbox, the whole is clicked. So I put {cked[idx]} to solve it, but my senior advised me that there was a problem with the code.
Because [checked] is in the form of "Boolean" and idx is "number".
And input has a 'disabled' attribute. I know that this is also deactivated as a whole because I put 'checked' in. By the way, I want each of them to be deactivated when I press the check box. But I don't know how. I searched for stack overflow, but I couldn't find a similar case to mine.
I believe you guys can help me.
const [checked, setChecked] = useState(false);
.
.
.
{keys &&
keys?.map((item: any, idx: number) => {
return (
<div key={idx}>
<Box component="form" className={classes.Box}>
<div className={classes.typeText}>{item.columnName}</div>
<div className={classes.flexWrap}>
<TextField
id="outlined-basic"
label={item.type}
variant="outlined"
className={classes.filled}
disabled={checked} //hear❗️
/>
<FormControlLabel
value="end"
control={
<Checkbox
className={classes.checkBox}
color="primary"
checked={checked[idx]} //hear❗️
onChange={handleCheckboxChange}
/>
}
label="Null"
labelPlacement="end"
/>
</div>
</Box>
</div>
);
})}
Move your textfield and checkbox to a different component so each one can have its own state.
function CheckComponent = (item, handleCheckboxChange) => {
const [checked, setChecked] = useState(false);
return (
<Box component="form" className={classes.Box}>
<div className={classes.typeText}>{item.columnName}</div>
<div className={classes.flexWrap}>
<TextField
id="outlined-basic"
label={item.type}
variant="outlined"
className={classes.filled}
disabled={checked}
/>
<FormControlLabel
value="end"
control={
<Checkbox
className={classes.checkBox}
color="primary"
checked={checked}
onChange={handleCheckboxChange}
/>
}
label="Null"
labelPlacement="end"
/>
</div>
</Box>
);
}
Then render as many as you need
{keys && keys?.map((item: any, idx: number) => {
<CheckComponent key={idx} item={item} handleCheckboxChange={() => console.log("clicked", idx); } />
})}
Something along these lines.
I would like to change the icon, but would like to keep the function when clicking.
is there a good solution for this?
I want to change this Icon
<Autocomplete
multiple
id="checkboxes-tags-demo"
options={top100Films}
disableCloseOnSelect
getOptionLabel={(option) => option.title}
renderOption={(option, { selected }) => (
<React.Fragment>
<Checkbox
icon={icon}
checkedIcon={checkedIcon}
style={{ marginRight: 8 }}
checked={selected}
/>
{option.title}
</React.Fragment>
)}
style={{ width: 500 }}
renderInput={(params) => (
<TextField {...params} variant="outlined" label="Checkboxes" placeholder="Favorites" />
)}
/>
Can anybody help me?
You can pass a function to customize the rendering of the Chip component used by the Autocomplete
<Autocomplete
multiple
id="tags-filled"
options={top100Films.map((option) => option.title)}
defaultValue={[top100Films[13].title]}
freeSolo
renderTags={(value, getTagProps) =>
value.map((option, index) => (
<Chip variant="outlined" label={option} {...getTagProps({ index })} />
))
}
renderInput={(params) => (
<TextField {...params} variant="filled" label="freeSolo" placeholder="Favorites" />
)}
/>
And the Chip component can be further customized with the deleteIcon prop
Edit: For more info, see the API of the Autocomplete and the API of the Chip
You can change it using the ChipProps of Autocomplete, as that icon is a part of a Chip component, and can be customized through deleteIcon property
I'm having an issue where I need a debounced input within an expansion panel in ReactJS, however I'm running into the issue that upon clicking the input the whole expansion bar changes colour from the black I've defaulted the application to an off white. I don't know what's causing this or how to prevent it.
<ExpansionPanel>
<ExpansionPanelSummary
expandIcon={<ExpandMoreIcon />}
aria-label="Expand"
aria-controls="additional-actions1-content"
id="additional-actions1-header"
>
<FormControlLabel
aria-label="Acknowledge"
onClick={event => event.stopPropagation()}
onFocus={event => event.stopPropagation()}
control={
<Checkbox
checked={rule.enabled}
onChange={() => Edit({ enabled: !rule.enabled })}
/>
}
/>
<DebounceInput
id="standard-basic"
value={rule.name}
onChange={event => {
Edit({ name: event.target.value });
}}
element={TextField}
debounceTimeout={500}
/>
</ExpansionPanelSummary>
</ExpansionPanel>
I've tried simple styling with color="black" throghout but that hasn't worked
Any help is appreciated
I am new to reactJS. I have a select option.
I want to add delete and edit button inside the select option.
Here's the code i tried,
<Select
style={{ width: 240 }}
placeholder="Choose Web Analytics Configuration"
dropdownRender={menu => (
<div>
{menu}
<Divider style={{ margin: '4px 0' }} />
<div
style={{ padding: '4px 8px', cursor: 'pointer' }}
onMouseDown={e => e.preventDefault()}
onClick={this.openModal.bind(this)}
>
<Icon type="plus" /> Add Database
</div>
</div>
)}
>
{dbConfigList.map(item => (
<Option key={item}>{item}
<Icon onClick={this.editFun.bind(this)} type="edit" style={{ fontSize: '20px', color: 'green' }} theme="outlined" />
<Icon onClick={this.deleteFun.bind(this)} type="delete" style={{ fontSize: '20px', color: '#CC160B' }} theme="outlined" />
</Option>
))}
</Select>
I have successfully added the buttons.
Here it looks like:
But when the User selects the option, the edit and delete button appears in the select box. I only needed the name to be shown and not buttons.
Here it looks like,
Help me with some solutions to fix it and inside the dropdown menu of every each option, I want the edit and delete buttons to be appeared at the right corner. Now it was appearing after the text. i can use margin for that. but every name size differs. Ex. Some names will be 6 characters and some will be more than 6 characters. Help me with some solutions.
Check the below example, you need to prevent your <Icon> as I had done for '+ -'
should be like:
{
dbConfigList.map(item => (
<Option key={item}>
{item}
{selectedValue !== item // you need to add state
<Icon
onClick={this.editFun.bind(this)}
type="edit"
style={{ fontSize: "20px", color: "green" }}
theme="outlined"
/>
<Icon
onClick={this.deleteFun.bind(this)}
type="delete"
style={{ fontSize: "20px", color: "#CC160B" }}
theme="outlined"
/> : null}
</Option>
));
}
class App extends React.Component {
constructor() {
super();
this.state = {
optionsdata : [
{key:'101',value:'Lion'},
{key:'102',value:'Giraffe'},
{key:'103',value:'Zebra'},
{key:'104',value:'Hippo'},
{key:'105',value:'Penguin'}
],
selectedValue: null // store selected value
}
}
handleChange = (e) => {
console.log(e.target.value);
var value = this.state.optionsdata.filter(function(item) {
return item.key == e.target.value
})
this.setState({ selectedValue: value[0].value }); // set state
console.log(value[0].value);
}
render() {
const { selectedValue } = this.state;
return (
<select onChange={this.handleChange}>
{this.state.optionsdata.map(function(data, key) { return (
<option key={key} value={data.key}>{data.value} {selectedValue !== data.value ? '+ -' : null } </option> )
})}
</select>
)
}
}
ReactDOM.render(<App/>, document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.0.1/react-dom.min.js"></script>
<div id="app"></div>
Demo App: https://codesandbox.io/s/button-in-select-menuitem-reactjs-demo-1zyvj
I solved this problem in material-Ui design by using onOpen={() => setIconVisibile(true)} and onClose={() => setIconVisibile(false)} callbacks to set the visibility of icons.
const [isIconVisibile, setIconVisibile] = React.useState(false);
<Select
onOpen={() => setIconVisibile(true)}
onClose={() => setIconVisibile(false)}
>
<MenuItem value={1}>
{"ONE"}
{isIconVisibile ? (
<ListItemSecondaryAction variant="outlined">
<IconButton edge="end" aria-label="delete">
<DeleteIcon />
</IconButton>
</ListItemSecondaryAction>
) : null}
</MenuItem>
</Select>
I am trying to change the font size of the checkbox and radio buttons labels.
I tried giving css to this component Checkbox but it's not changing the label's font size
since the labels are added dynamically.
so I researched and found this links. https://material-ui.com/api/radio/#css https://material-ui.com/customization/components/#overriding-styles-with-classes
but this is not helping me.
can you tell me how to fix it.
providing my code snippet and sandbox below.
https://codesandbox.io/s/material-demo-u95z5
const styles = theme => ({
root: {
display: "flex"
},
formControl: {
margin: theme.spacing.unit * 3
},
group: {
margin: `${theme.spacing.unit}px 0`
},
checkboxCSS: {
border: "1px solid red",
fontSize: 40
}
});
return (
<div className={classes.root}>
<FormControl component="fieldset" className={classes.formControl}>
<FormLabel component="legend">Gender</FormLabel>
<RadioGroup
aria-label="Gender"
name="gender1"
className={classes.group}
value={this.state.value}
onChange={this.handleRadioValueChange}
>
{radioValues.map(radio => {
return (
<FormControlLabel
value={radio.value}
control={<Radio />}
label={radio.label}
/>
);
})}
</RadioGroup>
{checkBoxvalues.map((check, index) => {
console.log("this.state[check.value]", this.state[check.value]);
return (
<FormControlLabel
key={check.value}
control={
<Checkbox
checked={check.checked}
onChange={this.handleCheckBoxChange(check.value, index)}
value={check.value}
className={classes.checkboxCSS}
/>
}
label={check.label}
/>
);
})}
</FormControl>
</div>
);
This link helped me: https://material-ui.com/api/form-control-label/#css
The following works in your sandbox.
In the classes object:
{
...,
checkboxLabel: {
fontSize: 40
}
}
On the FormControlLabel component add:
classes={{
label:classes.checkboxLabel
}}