I have a very simple problem. I've tried to put marginButtom on the TextFields. I don't have any idea why it isn't putting any margin on it.
Pls check this codesandbox link
CLICK HERE
CODE
<label>Schedule</label>
<TextField
fullWidth
name="schedule"
type="date"
variant="outlined"
className={classes.marginButtom}
/>
That's because you have a typo in your styles object.
marginButtom: {
marginButtom: "10px" // It should be marginBottom instead of marginButtom
},
Related
I have a problem in displaying the values from the TextField in my React app.
I'm using material UI and material-ui-phone-number as its packages. As you can see, the values after i click the flag, it is displaying on the back. I believe this is on the zIndex. Pls modify only the dialog2.js
Pls check my codesandbox here
CLICK HERE
Your MuiPhoneNumber utilizes a MUI modal for the country selection & its default z-index is 1300. It does not look like they expose a prop to alter its css properties so you can just target #country-menu (the id of the modal) using any preferred styling solutions
<div>
<style type="text/css">
{`
#country-menu {
z-index: 1801;
}
`}
</style>
<DialogContent style={{ width: 300, height: 500 }}>
<MuiPhoneNumber
name="MobileNo"
label="Mobile No."
variant="outlined"
fullWidth
defaultCountry={"vn"}
value={selectedValue}
onChange={(e) => setSelectedValue(e)}
/>
</DialogContent>
</div>
This can be achieved by doing the following changes:
Remove all CSS z-index defined
Put the Dialog 2 in Dialog 1 content
Here is the working CSB Link: https://codesandbox.io/s/nested-dialog-menuitem-dropdown-forked-wymm0?file=/dialog1.js
I have a series of Material UI buttons as such:
<Button className={classes.button}>Edit</Button>
<Button className={classes.button}>Duplicate</Button>
<hr />
<Button className={classes.button} color="secondary">
Remove
</Button>
I've given them a class that simply displays them as block eg:
button: {
display: 'block',
},
They work fine but there seems to be a setting where the smaller Edit button has extra padding on it because it has less text in the name:
If I add more text it corrects it:
Would anyone know how to fix this? If there is a setting somewhere?
The problem is with the min-width property which forces that "padding". Try just adding min-width: 'unset' to your button class.
There is a live example
https://codesandbox.io/embed/naughty-galois-bc0sz?fontsize=14&hidenavigation=1&theme=dark
Is there any way to override a Material UI components styling without having to create a whole new component using withStyles()?
For instance, say I am rendering the following and I just want to change the color of the "Delete" label:
<div style={styles.rowFooter}>
<FormControlLabel
control={<ClearIcon />}
label="Clear"
title="Clear all fields."
onClick={clearFields}
/>
<FormControlLabel
control={<DeleteIcon />}
label="Delete"
title="Delete this row."
onClick={deleteRow}
/>
</div>
To do this, I'd usually have to:
Create a new styles function that returns { color: "maroon" }.
Create a new component to render the "Delete" button.
Wrap my new component withStyles(newStylesFn)(MyComponent).
But I don't want to do all of that. Is there any way to avoid it?
Update:
One way that I know of is to just pass a CSS className. I was looking for something besides that because it doesn't even work in this situation to override the nested element.
What I'd really like to be able to do is just pass style={{ color: "maroon" }}, but that only changes the color of the icon, not the actual label text...
You could use the classes prop to override styles provided by Material UI instead of className.
<FormControlLabel
control={<DeleteIcon />}
label="Delete"
title="Delete this row."
classes={{
label: 'labelStyle'
}}
/>
styles.css
.labelStyle {
color: maroon !important;
}
Although it's Not the perfect solution, it still does the job without using withStyles().
I have a TableHead Component with multiple columns. One of them is a <Select> so that you can filter the content of the table (the value is one of 4 statuses in my case). I want to add an ellipsis at the end of the options' string if it's longer than it's container.
My problem is that material-ui's styles are wrapped around the Select component so whether I do it withStyles or by inserting styles inside the tag, it doesn't work.
I checked and with material-UI you can have noWrap and textOverflow: "ellipsis" should work but I can't quite figure out the right combination.
My expected result is that if the string is larger than it's parent, it displays the Ellipsis. So instead of this:
I'd like a simple "Contrib..." (The svg from Material-UI Select component overlays the text...)
I tried many different options but none of them do anything so clearly I must be doing something wrong. I tried changing colors to see if my styles were being affected which they are.
<Grid item sm={2} lg={2} style={{display: 'flex', alignItems:'center'}}>
<Select native style={{ textOverflow: "ellipsis", overflow: "hidden", whiteSpace: "pre" }}
value={this.state.status}
onChange={this.handleChange.bind(this, Filter.Status)}>
{Object.keys(StatusFilter).filter(key => !isNaN(Number(StatusFilter[key]))).map(item => {
return (<option key={item} value={StatusFilter[item]}>{this.getStatus(StatusFilter[item])}</option>);
})}
</Select>
</Grid>
Two things here, first a native select has no way to add ellipsis since text-overflow is only for block elements. See Is it possible to make text-overflow:ellipsis for select with css only?
In case you want to explore that way, there is also inputProps that is an object you can use to pass properties to the underlying input. So if you want to add a style to the native input you can:
<Select native inputProps={{ style: { width: 100 } }}>{...}</Select>
On the other hand, if you remove the native property the ellipsis should be applied by default if the select box is smaller than the text.
In my case ellipses were missing even on non native Select component, and that was because display: flex style was applied over 'MuiSelect-root' component.
Replace that - i.e. with display:block - and ellipsis will be there for you.
<FormControl
variant="outlined"
margin="dense"
className={classes.formControl}
error={touched.test && Boolean(errors.test)}
>
<InputLabel id="demo-simple-select-outlined-label">Test</InputLabel>
<Select
labelId="demo-simple-select-outlined-label"
id="demo-simple-select-outlined"
value={course}
name="test"
onChange={handleChange}
label="Test"
>
<MenuItem value="">
<em>None</em>
</MenuItem>
<MenuItem value={1}>1</MenuItem>
<MenuItem value={2}>2</MenuItem>
<MenuItem value={3}>3</MenuItem>
<MenuItem value={4}>4</MenuItem>
</Select>
<FormHelperText error={touched.test && Boolean(errors.test)}>{errors.test}</FormHelperText>
</FormControl>
And add class:
formControl: {
width: "100%",
},
I have a problem trying to remove the bottom border from the default Picker in react-native.
My code:
<Picker
style={styles.pickerStyle}
selectedValue={this.state.registerType}
onValueChange={(item) => this.setState({registerType:item})}>
<Picker.Item label="Vælg emne" value="choose" />
{registerTypes}
</Picker>
On the image below you can see what I want to remove:
I have tried to use the underlineColorAndroid='transparent' properties as you will do in the TextInput tag, but it diden't work. Any suggestions?
Maybe it's not the best way ever, but I found a fast solution that worked fine in my project.
Define a height for <View> and <Picker>, and the container element must be 1px bigger.
Set overflow: "hidden" para o container.
<View style={styles.container}>
<Picker style={styles.picker}>
<Picker.Item value="1" label="Yes" />
<Picker.Item value="2" label="No" />
</Picker>
<View>
container: {
overflow: "hidden",
height: 51
},
picker: {
height: 50
}
I know it was an easy fix, but a part of my design was to change the background color in the Picker and then the border is hidden behind I guess.