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'
},
},
}
},
});
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>
Input textfields height is not changing with in-line css.
<FormControl
sx={{
"& .MuiOutlinedInput-notchedOutline": {
borderColor: "blue",
},
"&.Mui-focused .MuiOutlinedInput-notchedOutline": {
borderColor: "red",
},
"&.label[data-shrink=false]+.MuiInputBase-formControl .MuiInputBase-input-MuiOutlinedInput-input":
{
height: "25px",
},
}}
>
<LocalizationProvider
dateAdapter={AdapterDateFns}
sx={{
BackgroundColor: "red",
}}
>
<DateRangePicker
startText="Start date"
endText="End date"
value={value}
onChange={(newValue) => {
setValue(newValue);
}}
renderInput={(startProps, endProps) => (
<React.Fragment>
<TextField
{...startProps}
/>
<Box sx={{ mx: 2 }}> to </Box>
<TextField {...endProps} />
</React.Fragment>
)}
/>
</LocalizationProvider>
</FormControl>
This is working when changing it in browser
if you change
"&.label[data-shrink=false]+.MuiInputBase-formControl .MuiInputBase-input-MuiOutlinedInput-input":
to
"& .MuiInputBase-input":
it should work
I have a MenuItem in my Dialog2 in my React app. I have a problem displaying the MenuItem. I already put a zIndex: 1900 that is higher than the two dialogs. How come it doesn't appear on the front. It is hiding still on the back of the dialogs?
Pls check my codesandbox here:
CLICK HERE
<DialogContent style={{ width: 300 }}>
<TextField variant="outlined" select label="Gender" fullWidth>
{genders.map((gender, index) => (
<MenuItem key={index} value={gender} style={{ zIndex: 1900 }}>
{gender}
</MenuItem>
))}
</TextField>
</DialogContent>
You've to target the Menu popover z-index
const useStyles = makeStyles({
customMenuPopover: {
// take note of !important because default z-index is applied inline
zIndex: "1900 !important"
}
});
<TextField
SelectProps={{
MenuProps: {
PopoverClasses: {
root: classes.customMenuPopover
}
}
}}
variant="outlined"
select
label="Gender"
fullWidth
>
{genders.map((gender, index) => (
<MenuItem key={index} value={gender} style={{ zIndex: 1900 }}>
{gender}
</MenuItem>
))}
</TextField>
I have a ToggleButton
I want the selection to look like a button
But when I put a button inside I get such an error in the console
const StyledToggleButtonGroup = withStyles((theme) => ({
grouped: {
margin: theme.spacing(0.5),
border: 'none',
},
}))(ToggleButtonGroup);
<StyledToggleButtonGroup size="medium" value={problem} exclusive onChange={handleChange}>
<ToggleButton color="red" value="technical" className={helpClasses.boxButton}>
<Button size="medium" fullWidth color="primary" variant="outlined">
{t('help.technical')}
</Button>
</ToggleButton>
</StyledToggleButtonGroup>
<DialogActions>
error in console
Warning: validateDOMNesting(...): <button> cannot appear as a descendant of <button>.
I want it to look like this
From the documentation, https://material-ui.com/components/toggle-button/
It says, you can put icons inside ToggleButton, or most likely anything other than Button.
Try follow the doc,
<ToggleButtonGroup
value={alignment}
exclusive
onChange={handleAlignment}
aria-label="text alignment"
>
<ToggleButton value="left" aria-label="left aligned">
<FormatAlignLeftIcon />
</ToggleButton>
<ToggleButton value="center" aria-label="centered">
<FormatAlignCenterIcon />
</ToggleButton>
<ToggleButton value="right" aria-label="right aligned">
<FormatAlignRightIcon />
</ToggleButton>
<ToggleButton value="justify" aria-label="justified" disabled>
<FormatAlignJustifyIcon />
</ToggleButton>
</ToggleButtonGroup>
I did it so
const classes = makeStyles((theme) => ({
boxToggleButton: {
borderRadius: '5px',
borderStyle: 'solid',
border: 1,
width: '6vw',
height: '6vw',
},
textToggleButton: {
color: colors.light.background,
fontWeight: 400,
fontSize: fontSizes.large,
},
}));
<ToggleButton value="Wrong identification ">
<Grid
container
justify="center"
alignItems="center"
item
className={classes.boxToggleButton}
>
<Typography className={classes.textToggleButton}>
{"wrongIdentification"}
</Typography>
</Grid>
</ToggleButton>;
The radio group is always vertical listed in material-ui. Is there a way to horizontally align them? e.g. all radio button in one horizontal line.
Simply use the row property:
<RadioGroup row><Radio /><Radio /></RadioGroup>
RadioGroup inherits from FormGroup so the properties of the FormGroup component are also available.
Another example, with labels:
<RadioGroup aria-label="anonymous" name="anonymous" value={false} row>
<FormControlLabel value="true" control={<Radio />} label="Yes" />
<FormControlLabel value="false" control={<Radio />} label="No" />
</RadioGroup>
To render the radio buttons in a row:
<RadioButtonGroup style={{ display: 'flex' }}>
To reset sizing according to content:
<RadioButton style={{ width: 'auto' }} />
Simply add the prop row={true} on the RadioGroup control.
<RadioGroup
aria-label="Location"
name="location"
className={classes.group}
value={location}
onChange={handleChange}
row={true}
>
<FormControlLabel value="company" control={<Radio />} label="Company" />
<FormControlLabel value="home" control={<Radio />} label="Home" />
<FormControlLabel value="other" control={<Radio />} label="Other" />
</RadioGroup>
For those who are still struggling, use this style:
const styles = theme => ({
group: {
width: 'auto',
height: 'auto',
display: 'flex',
flexWrap: 'nowrap',
flexDirection: 'row',
}
});
class MyComponent extends React.Component {
render() {
const { classes } = this.props;
<RadioGroup className={classes.group} ...>
}
};
export default withStyles(styles)(MyComponent);
You just need to mention row in <RadioGroup>.
You can write your code like this:
<FormControl component="fieldset">
<FormLabel >Lable</FormLabel>
<RadioGroup aria-label="overall_sal" name="Overall SAL" value={value} onChange={handleChange} row>
<FormControlLabel value="low" control={<Radio />} label="Low" />
</RadioGroup>
</FormControl>
I cant comment yet, but to add to what #lambdakris said:
You may also need to add flexDirection: 'row'. The easiest way to make these changes instead of using the inline styles is to add your css to the styles object and class that material-ui already uses.
const styled = theme => ({
formControl: {
margin: theme.spacing.unit * 3,
width: "100%", //parent of radio group
},
group: {
flexDirection: 'row',
justifyContent: 'space-around',
}
});
...........
<RadioButtonGroup className={classes.group}>