I'm trying to change the width of the calendar popup on the Mui DatePicker but can't seem to figure it out. I have changed the width of the input using:
renderInput={(params) => <TextField {...params} sx={{ ...formStyles }} />}
But I want to change the width of the calendar as well. I'm new to working with any component library, so maybe I'm missing something. The docs said you could override the theme with the name MuiDatePicker, but when I try:
const theme = createTheme({
components: {
MuiDatePicker: {},
},
});
I'm getting a typescript error saying that MuiDatePicker isn't assignable to Components
Are you trying to change the width of the input TextField?
I am doing it like so, and it seems to do the trick everytime:
Wrap your DatePicker in a div
<div className={classes.datePicker}>
<DatePicker format="dd/mm/yyyy">
</div>
Override MUI styles of the div's TextField like so:
datePicker: {
"& .MuiTextField-root": {
width: 200,
},
Not sure if that's the best way to do it, but it works for me, also in MUI v5.
Related
I am using FluentUI components for developing Teams App.
And have a form where I need to mark some Input and FormDropdown fields as required.
On adding required flag, the required fields sign (*) comes up beside the field label in default i.e black color.
I want to restyle this asterisk sign and change the color of the sign to red.
Any suggestions on how to achieve this.
You can use subComponentStyles property inside styles to modify styles of Label component:
<TextField
label="Required "
required={true}
styles={{
subComponentStyles: {
label: {
root: {
':after': {
position: 'absolute',
content: `'#'`,
color: 'green'
}
},
},
},
}}
/>
Approach is the same for Dropdown component.
Codepen working example.
Label Component implementation.
TextField areaLabel implementation.
Background:
Our app uses #material-ui/core and we're not ready to upgrade to #mui/material.
Our app uses React 16.14.0 and Node 10.15.3, and we're not ready to upgrade.
We use styled-components and have configured Material UI to work with it.
Now that that's out of the way:
I'm having a lot of trouble targeting the inner components. I want to style the outline of a <TextField variant="outline"/>.
MUI's how-to guide says that the inner components should be discoverable in the devtools with classes like MuiInputBase-input. However, my app is giving me MuiInputBase-input-48, and the number is not guaranteed to stay constant between renders.
So I thought I had it with this, but sometimes I'll refresh and lose it because the classnames will change:
const StyledInput = styled(TextField).attrs(p => ({
inputProps: { inputMode: "numeric", pattern: "[0-9]*", color: "white" },
}))`
.MuiOutlinedInput-root-25 .MuiOutlinedInput-notchedOutline-32 {
border-color: ${colors.lightGrey};
}
`;
const SDCurvedInput = (props) => (
<StyledInput
{...props}
id={props.label}
variant="outlined"
/>
);
As a test I tried replacing StyledInput with simply TextField in the markup because I thought maybe styled-components was doing something to add this number, but no luck.
I recently added to this project, in this project they use material ui for some elements and some HTML elements for the rest of the elements. they write the style for both of them
Now they ask me to change the minimum code for changing the theme, this is the style for material ui part
// this is UserOptions.js
const chooseTheme = [theme]
const themeStyle =
localStorage.getItem('theme') === null ?
chooseTheme[0]['IGS'] : chooseTheme[0][localStorage.getItem('theme')];
const styles = theme => ({
button: {
backgroundColor: themeStyle.bkgTextColor,
color: themeStyle.dialogContentColor,
},
})
this is the textfield I used for changing the theme
<TextField
select
style ={{direction: 'center', width: '100px'}}
type= 'select'
>
<option value={'Light'}>Light</option>
<option value={'Dark'}>Dark</option>
</TextField>
and I used this code for exporting part
export default withStyles(styles)(UserOptions);
this is the Theme.js file
export const Light = {
bkgTextColor: '#19417C';
dialogContentColor: '#E7EFFA';
}
when user change the otion of the textfield, the html element color changes but i should refresh the page to see the material ui elements color changed, what should I do to make the material ui color change without using MuiThemeProvider (maybe i should redirect to this page after re-render the page and i don't know how)
I have the following:
<ListItem key={name} hidden={true} aria-hidden={true}>
name
</ListItem>
but the ListItem is still showing up. How can it be hidden?
As far as I know, there is no hidden props on the ListItem component in Material-UI, so you will have to implement you own behavior to hide the ListItem :
You can not render the concerned ListItem at all.
You can render it but hide it using some CSS. See How to display and hide a div with CSS?.
I was looking to programmatically hide a Material-UI FormControl component, and found the same issue (i.e. the lack of a hidden prop).
What worked for me was to add a method that returned the appropriate class string, based on whether I wanted to show the component in question or not.
For example, with styles like:
const styles = createStyles({
...
formcontrol: {
minWidth: 120,
margin: 10
},
invisible: {
visibility: "hidden"
},
});
I added this to my component class:
getStyle() {
let cls: string;
if (this.props.whatever) {
cls = this.props.classes.formcontrol;
} else {
cls = this.props.classes.invisible + " " + this.props.classes.formcontrol;
}
return cls;
}
And then reference that from render() when creating the component I want to sometimes hide:
<FormControl className={this.getStyle()}>
...
</FormControl>
This should work for any styled MUI component.
(Side-note: the display prop appears from the docs to do this, but didn't work for me. Perhaps it works only for Box components, which happen to be what's used in all of the examples in the docs. This is worth further investigation which I have not yet spent the time to do.)
I have a signup form in a React app. I am using material-ui TextField and use the errorText property to add a message if there is an error in the input.
errorText={this.state.messages.emailMessage}
The state.messages.emailMessage is initially set to null and so TextField does not have the extra space for the message when the input is first rendered.
When the message is added it moves the other elements.
How can I allow space for the new node if it is needed so that the other elements are not moved? I tried setting the initial state of the message to ' ' but this colours the input red for error and doesn't work anyway!
You could just use the errorStyle property setting an absolute position..
That's how I fix those problems in my projects.
In the end I passed a style parameter to the material-ul component that set the errorText to display: table. This then stopped it from affecting the other elements when it was added.
To where should this style added?
It needs to be added for the HelperText styles. Here is an example:
const helperStyles = makeStyles(theme => ({
root: {
position: 'absolute',
bottom: '1em',
},
}))
const helperClasses = helperStyles()
<FormHelperText classes={helperClasses}>
{helperText}
</FormHelperText>
You can make them a fixed height by making the helperText equal to an empty space when there is no message to show.
<TextField helperText={error ? error.message : ' '} />
Like #leonormes 's post suggests, adding the errorStyle prop to the material ui component and setting the display property to "table" solved this issue.
The material UI components no longer moves or becomes unaligned when showing an error.
Here's what the component ended up looking like:
<TextField
floatingLabelText="Name"
value={this.state.name}
onChange={e => this.setState({ name: e.target.value })}
errorText={this.props.validationErrors.get('name')}
errorStyle={{ display: "table" }}
/>
You can target the MuiFormHelperText-root class . Below example is when you are applying style inside MUI makeStyles , but you can do the same thing with external CSS file .
'& .MuiFormHelperText-root' : {
position : 'absolute',
bottom : '-1rem'
}
For those who need an updated answer (errorText isn't a thing anymore as far as I could tell), then hopefully this will work:
<Box style={{ minHeight: "100px" }} >
<TextField
{...props}
/>
</Box>
It allows the error text message to be rendered inside the flexbox without affecting the other components, so it shouldn't disturb the things around it.
CodeSandbox
You can do something like this
const useStyles = makeStyles({
helperText: {
'& .MuiFormHelperText-root': {
height: '0',
marginTop: '0'
}
}
});
And then add this class text field control
className={classes.helperText}
Just setting position to absolute didn't work at all. This enables error text to display on input field. So for perfect fix we also have to set bottom with some value to make it fixed. Example below.
errorStyle:{
position: 'absolute',
bottom: '-0.9rem'
}
As mentioned in other answer setting display to table worked as well.
So both the styles works