I'm using MUI with ReactJs and I have implemented a radio group, and I want to override the default style.
I achieved the desired style, but my problem is I can't check if the radio button is checked or not from the FormControlLabel. The label color and background color should change if the radio button is checked!
<RadioGroup
row
name="row-controlled-radio-buttons-group"
value={gender}
onChange={onChangeGender}
sx={{ margin: "10px" }}
>
<FormControlLabel
value="m"
control={
<Radio
sx={{
"&.Mui-checked": {
".MuiRadio-root": {
bgcolor: "#F27A38",
color: "#F21138",
},
},
display: "none",
}}
/>
}
sx={formControlSubTabs}
label="Male"
/>
<FormControlLabel
value="f"
control={
<Radio
sx={{
"&.Mui-checked": {
color: "#F27C38",
},
display: "none",
}}
/>
}
sx={formControlSubTabs}
label="Female"
/>
</RadioGroup>
This the formControlSubTabs javascript object for the sx attribute :
const formControlSubTabs = {
".MuiFormControlLabel-label": {
color: "#F27C38",
fontFamily: "Roboto , Helvetica , Arial , sans-serif",
fontSize: "14px",
fontWeight: "200",
m: "auto",
},
".MuiFormControlLabel-checked": {
".MuiFormControlLabel-label": { bgcolor: "#F27A38" ,color: "#F21138",},
},
border: 1,
borderColor: "#F27C38",
borderRadius: 3,
p: 1,
width: "80px",
mx: 1,
};
export default formControlSubTabs;
PS: I already have a useState for gender value and onChangeGender method to set the gender.
Related
Self-taught dev here.
I am trying to style a textfield rendered by a DesktopDatePicker in a react application. I can change the width using MakeStyles, but can't seem to change the height of the box, or the font of the input text. My code is as follows:
const useStyles = makeStyles(() => ({
textField: {
width: "90%",
height: "75%",
marginLeft: "auto",
marginRight: "auto",
paddingBottom: 0,
marginTop: 0,
},
input: {
height: "70%",
fontSize: "small",
}
}));
const classes = useStyles();
return (
<div >
<LocalizationProvider dateAdapter={AdapterDateFns}>
<DesktopDatePicker
inputFormat="MM/dd/yyyy"
selected={new Date(initialVal)}
size="small"
onChange={(newDate) => {
setDateBirth(newDate);
setFieldValue("dateBirth", newDate);
}}
renderInput={(params) => <TextField
className={classes.textField}
sx={{ color: 'red', display: 'inline', fontSize: 8, height: "75%" }}
variant='outlined'
size="small"
InputProps={{
className: classes.input,
}}
{...params} />}
/>
</LocalizationProvider>
</div>
)
}
This renders the following:
MUI styling
The only thing I have been able to do to change the box size is the inline size="small" property. Thanks in advance.
I set Button to show calendar and when press this Button and select a date this shows in the calendar -strip located at the top. problem is that the style changes just for the pre-selected date and when I select the new date the style is not function.
this is my code:
<CalendarStrip
scrollable
style={{ height: 70, paddingBottom: 10 }}
calendarColor={'#4caf50'}
selectedDate={new Date(date)}
calendarHeaderStyle={{ display: "none" }}
iconStyle={{ display: "none" }}
highlightDateNameStyle={{ color: 'black', position: "absolute", bottom:
10, color: 'green', backgroundColor: "white" }}
highlightDateNumberStyle={{ color: 'green', padding: 10, borderRadius: 6,
backgroundColor: "white" }}
dateNumberStyle={{ color: 'white', borderRadius: 6, }}
dateNameStyle={{ color: 'white', position: "absolute", bottom: 0.5 }}
iconContainer={{ flex: 0.1 }}
/>
{show && (
<DateTimePicker
testID="dateTimePicker"
value={new Date()}
mode={mode}
is24Hour={true}
display="default"
onChange={onChange}
/>
)}
1- In DateTimePicker you have onChange prop, so make onChange function set the selected value.
2- Now in CalendarStrip let the prop selectedDate take the value you have set in onChange
I am using Material UI v5 beta1 and I have been trying to customize their Autocomplete component so that the Typography color on the options changes from black to white whenever the item is selected, however, I can't figure out how to pass the style to it.
So far I have tried passing my styles on .MuiAutocomplete-option either through a styled component or a global override (see code attached) and tried every state I can think of, hover, selected, focused, even tried the Material classes for those but none of them worked. I have also tried using a custom Popper with a MenuList inside but with no luck. I have been pulling my hair with this for a couple of days now, and not being able to inspect the DOM makes it even harder, any help or tip would be highly appreciated.
Thank you in advance.
MuiAutocomplete: {
styleOverrides: {
root: {
// ...
},
option: {
padding: '5px 12px',
backgroundColor: theme.palette.background.paper,
display: 'flex',
height: 42,
borderRadius: theme.borderRadius.s,
'&:hover': {
backgroundColor: theme.palette.action.hover,
'& .Mui-Typography-root': { color: theme.palette.text.contrast },
},
'& .Mui-selected': {
backgroundColor: theme.palette.action.hover,
'& .Mui-Typography-root': { color: theme.palette.text.contrast },
},
'&.disabled': {
opacity: 0.5,
'& .Mui-Typography-root': {
color: theme.palette.text.disabled,
},
},
},
renderOption={(props, option) => {
return (
<li {...props}>
<Box display={'flex'} flexDirection={'row'}>
<Avatar size={'32'} variant={'circular'} />
<Box display={'flex'} ml={3} flexDirection={'column'}>
<Typography color={'text.primary'}>
{option.label}
</Typography>
<Typography color={'text.secondary'}>
Extra Information
</Typography>
</Box>
</Box>
</li>
);
}}
I would pass in { selected } to your renderOption, then use it to toggle your styling inline
For example:
renderOption={(props, option, { selected }) => {
return (
<li {...props}>
<Box display={'flex'} flexDirection={'row'} style={{ backgroundColor: selected ? 'red' : 'green' }}>
<Avatar size={'32'} variant={'circular'} />
<Box display={'flex'} ml={3} flexDirection={'column'}>
<Typography color={'text.primary'}>
{option.label}
</Typography>
<Typography color={'text.secondary'}>
Extra Information
</Typography>
</Box>
</Box>
</li>
);
}}
I am new to react-admin, and how to customize react admin buttons?
In my scenario I have a list also in create, edit, and export button there and I don't know which is the best way to change button css in react-admin. Can anyone solve this?
By default I have button like above mentioned, so I need to add css for this two buttons.
Here is my sample code
// style list
const useStyles = makeStyles((theme) => ({
userCard: {
padding: "20px",
borderRadius: "12px",
},
btn_edit: {
background: "#5E35B1",
color: "#fff",
fontSize: "10px",
},
mainList: {
boxShadow: "none !important",
borderRadius: "0px",
},
listCreateIcon: {
padding: "0px !important",
},
}));
//main
export const UserList = (props) => {
const classes = useStyles();
return (
<Card className={classes.userCard}>
<List
{...props}
pagination={null}
perPage={9999}
className={classes.mainList}
>
<Datagrid className={classes.listCard}>
<TextField source="username" />
<BooleanField source="enabled" />
<ReferenceArrayField reference="_roles" source="roles">
<SingleFieldList>
<ChipField source="name" />
</SingleFieldList>
</ReferenceArrayField>
<EditButton className={classes.btn_edit} />
</Datagrid>
</List>
</Card>
);
};
export const UserCreate = (props) => {
const classes = useStyles();
return (
<Create {...props} className={classes.listCreateIcon}>
<SimpleForm style={{ padding: "0px !important" }}>
<TextInput source="username" />
<TextInput type="password" source="password" />
<ReferenceArrayInput source="roles" reference="_roles" allowEmpty>
<SelectArrayInput optionText="name" />
</ReferenceArrayInput>
<BooleanInput source="enabled" defaultValue={true} />
</SimpleForm>
</Create>
);
};
export const UserEdit = (props) => (
<Edit {...props}>
<SimpleForm>
<TextField source="username" />
<ReferenceArrayInput source="roles" reference="_roles">
<SelectArrayInput optionText="name" />
</ReferenceArrayInput>
<BooleanInput source="enabled" />
</SimpleForm>
</Edit>
);
This will work for you.
btn_create: {
display: "inline-flex",
alignItems: "center",
gridGap: 4,
backgroundColor: "transparent",
borderColor: "transparent",
fontSize: 16,
color: "blue" // the text color you want
// if you are using the svg icon
svg : {
width: 16,
height: 16,
path: {
fill : "blue" //color code of icon
}
}
},
btn_group: {
display:"flex",
gridGap: "16px",
alignItems: "Center",
}
on Component
<div className={classes.btn_group}>
<EditButton className={classes.btn_create} />
<EditButton className={classes.btn_create} />
</div>
PS. If the icon is font icon, you may not use the svg styling.
having a small problem with displaying icon inside a custom input.
My code is:
<TutorialsCommentInput
placeholder="Write your opinion..."
style={{ padding: "20px" }}
fullWidth="true"
InputProps={{
endAdornment: (
<InputAdornment position="end">
<Icon />
</InputAdornment>
),
}}
/>
TutorialCommentInput:
export const TutorialsCommentInput = withStyles((theme) => ({
input: {
borderRadius: 0,
backgroundColor: '#262626',
fontSize: '15px',
fontWeight: 500,
padding: '2px 8px 2px',
height: '42px',
color: '#B6B6B6',
fontFamily: [
'Nunito',
'sans-serif'
]
}
}))(InputBase)
I've followed every step to do so, the Icon works completely fine outside the input, no clue what's wrong.