How do I properly change the height of React Material UI v4 Textfield?
The following code messes up the label. Looking for a simple and easy method.
export const useTextFieldStyles = makeStyles({
root: {
minHeight: '42px',
},
});
<TextField
{...params}
margin="dense"
value={listItem}
InputProps={{
classes: {
input: textFieldStyles.root,
},
}}
/>
Referring to this link: Set TextField height material-ui
You can do this with changing style of mui component in your style classes like this
MuiInputLabel-outlined.MuiInputLabel-shrink
{
padding: .3rem !important;
transform: translate(-14px, -14px) scale(0.7) !important;
}
You can change my params
Related
How do I override Material themes for FormControl? It is usually html parent above a Textfield. I want the margin bottom to be 8px, instead of 4px. Below is not working. Currently using MUI version 4
export const useProcedureTableStyles = makeStyles({
overrides: {
'& .MuiTextField-root': {
marginBottom: '8px',
},
},
textField: {
height: '31px',
},
<TextField
{...params}
margin="dense"
value={listItem}
error={listItem.duplicateFlag}
InputProps={{
...params.InputProps,
style: { padding: 0 },
className: procedureStyles.overrides,
classes: {
input: procedureStyles.textField,
},
}}
/>
Researching this resource: material-ui overwrite theme with useStyles / jss
Below is a simplified version of the html structure shown in your screenshot:
<div class="MuiFormControl-root MuiTextField-root">
<div class="MuiOutlinedInput-root">
<input type="text" class="MuiOutlinedInput-input"/>
</div>
</div>
You are passing procedureStyles.textField via the input key of the classes prop in InputProps. That targets the innermost input element (and I assume that is working as intended). That input element can also be targeted using the className property of inputProps (lowercase i).
You are passing procedureStyles.overrides via the className property of InputProps. InputProps targets the second div in the structure above (the one with class="MuiOutlinedInput-root"), and then your margin bottom styles are being applied to any descendants of the div that have a class of MuiTextField-root. Since the div you want to target is an ancestor of that second div and not a descendant, your styles have no effect.
To target the first div in that structure, you can use the className prop directly on TextField. It would also be equivalent to use the root key of the classes prop directly on TextField.
Here's a working example:
import React from "react";
import { makeStyles } from "#material-ui/core/styles";
import TextField from "#material-ui/core/TextField";
const useStyles = makeStyles((theme) => ({
overrides: {
marginBottom: "8px"
}
}));
export default function BasicTextFields() {
const classes = useStyles();
return (
<>
<div>Something before to demonstrate top margin</div>
<TextField
id="outlined-basic"
margin="dense"
label="Outlined"
variant="outlined"
className={classes.overrides}
/>
<div>Something after to demonstrate bottom margin</div>
</>
);
}
Do this in your Material-UI theme:
overrides: {
MuiFormControl:{
marginDense:{
marginBottom:'8px'
}
}
}
I'm trying to apply some basic styles to the options inside the Autocomplete component from MUI v5. I'm just trying to change the background color on hover, and based on whether or not it is selected. I've tried 2 approaches based on the documentation, using a theme, and applying the sx prop to Autocomplete.
Using Theme almost has me there, code below:
import { createTheme, ThemeProvider } from '#mui/material/styles';
const theme = createTheme({
components: {
MuiAutocomplete: {
styleOverrides: {
option: {
'&[aria-selected="true"]': {
backgroundColor: '#e3abed',
},
'&:hover': {
backgroundColor: '#9c27b0',
},
backgroundColor: '#fff',
},
},
},
},
})
I have the ThemeProvider wrapped around my entire app
and the component:
<Autocomplete
options={['1', '2', '3']}
renderInput={(params) => <TextField {...params} label="Priority" />}
onChange={(_e, val) => setPriority(val)}
/>
So, this almost works. However the [aria-selected="true"] styling is only being applied when I am also hovering over another option in the dropdown. Otherwise it's the default grey that comes with the component and I don't understand why.
The second path I have tried is to use the sx prop on the Autocomplete component. In the docs it says you can target child components by their class name: https://mui.com/material-ui/customization/how-to-customize/#overriding-styles-with-class-names
Here is my component:
<Autocomplete
options={['1', '2', '3']}
renderInput={(params) => <TextField {...params} label="Priority" />}
onChange={(_e, val) => setPriority(val)}
sx={{
'& .MuiAutocomplete-option': {
backgroundColor: '#000',
},
'& .Mui-focused': {
backgroundColor: 'red',
},
}}
open
/>
That doesn't appear to be having any effect. I've been working on this for almost 2 hours and can't seem to get to the finish line here. Any help would be greatly appreciated.
I had the same problem; turns out I just needed to explore the Autocomplete API docs' Props section a bit further. There are several customization possibilities if you don't want to deal with global theme customization:
The PaperComponent prop allows customization of "[t]he component used to render the body of the popup." Note that simply using sx on Autocomplete does not work here because (as #bnays-mhz pointed out) the PopperComponent that the PaperComponent is nested in lives outside the main DOM tree (for z-index/modal UX purposes).
The renderGroup prop allows overriding the rendering of option group headers.
The renderOption prop allows overriding the rendering of individual options.
function CustomPaper({ children }) {
return (
<Paper
sx={{
"& .MuiAutocomplete-listbox": {
"& .MuiAutocomplete-option[aria-selected='true']": {
bgcolor: "purple",
"&.Mui-focused": {
bgcolor: "purple",
}
}
},
"& .MuiAutocomplete-listbox .MuiAutocomplete-option.Mui-focused": {
bgcolor: "red",
}
}}
>
{children}
</Paper>
);
}
Following up on Lars' answer, here's an example using a custom Paper component. Just pass in the custom Paper component name to the PaperComponent prop on Autocomplete <Autocomplete PaperComponent={CustomPaper} {...blahBlahOtherProps} />. This way is nice if you don't want to override the theme for all Autocomplete components.
You can override Autocomplete options css by targeting class
'.MuiAutocomplete-popper'
You will have to apply css globally because this node is created outside the root element in DOM.
I too faced this issue and found a solution.
You Can try this to set the css for options, single option and while hovered (focused) in the Autocomplete using 'sx' prop
Easy Way to customize your AutoComplete component which can be used in Mui V5
<Autocomplete
limitTags={1}
disablePortal
id="simple-search"
value={select.region}
onChange={handleChange("region")}
options={region}
sx={{
width: { sm: "100%", md: 340 },
"& + .MuiAutocomplete-popper .MuiAutocomplete-option":
{
backgroundColor: "#363636",
},
"& + .MuiAutocomplete-popper .MuiAutocomplete-option[aria-selected='true']":
{
backgroundColor: "#4396e6",
},
"& + .MuiAutocomplete-popper .MuiAutocomplete-option[aria-selected ='true'] .Mui-focused":
{
backgroundColor: "#3878b4",
},
}}
disableCloseOnSelect
multiple
renderInput={(params) => (
<TextField {...params} label="Region" color="info" />
)}
/>
How can i override this css of material ui ? i want to change de color to : white, becouse when i try to write on my TextField the color is black
If you want just the text color to be white
You can add sx prop for the TextField.
<TextField
variant="outlined"
sx={{
'& .MuiInputBase-input': {
color: 'white',
},
}}
/>
If you want to customize the default MUI theme
Import createTheme and ThemeProvider.
import { createTheme, ThemeProvider } from '#mui/material/styles';
Override theme.
(You can go to https://mui.com/customization/default-theme/ and find exactly what to override.)
const theme = createTheme({
palette: {
common: {
white: '#FFFAFA'
},
}
})
Wrap Your Components or the TextField with ThemeProvider.
<ThemeProvider theme={theme} >
<TextField
variant="outlined"
sx={{
'& .MuiInputBase-input': {
color: 'white',
},
}}
/>
</ThemeProvider>
The color 'white' in the TextField will be the white color that you customized.
You can also define a color palette for the application.
Refer mui.com/customization/theming for more details.
Here is a youtube Tutorial for this
https://www.youtube.com/watch?v=xIIJfmDnvPE&ab_channel=TheNetNinja
If your custom style is overridden by Material UI you can just add !important; after each one of your custom styles.
You can the sx on the props of the object:
<TextField id="outlined-basic" sx={{background:'red'}} label="Outlined" variant="outlined" />
follow the link to see the props of sx: https://mui.com/system/the-sx-prop/
See the docs for overriding nested component styles.
For TextField that would be:
<TextField
variant="outlined"
sx={{
'& .MuiInputBase-input': {
color: 'white',
},
}}
/>)
The colour of a disabled input text field created using material UI is light grey by default and it is not very visible against a white background. Is there any way to change the font colour of a disabled input text field?
Below is an example of how to do this showing the customized version next to the default styling.
import React from "react";
import { withStyles } from "#material-ui/core/styles";
import TextField from "#material-ui/core/TextField";
import Button from "#material-ui/core/Button";
const DarkerDisabledTextField = withStyles({
root: {
marginRight: 8,
"& .MuiInputBase-root.Mui-disabled": {
color: "rgba(0, 0, 0, 0.6)" // (default alpha is 0.38)
}
}
})(TextField);
export default function Demo() {
const [disabled, setDisabled] = React.useState(true);
return (
<>
<Button onClick={() => setDisabled(!disabled)}>Toggle Disabled</Button>
<br />
<br />
<DarkerDisabledTextField
disabled={disabled}
id="outlined-basic"
label="Custom"
value={`Disabled = ${disabled}`}
variant="outlined"
/>
<TextField
disabled={disabled}
id="outlined-basic"
label="Default"
value={`Disabled = ${disabled}`}
variant="outlined"
/>
</>
);
}
I think the simplest way is to create an object to define the font color and pass it to the TextField's inputProps.
const fontColor = {
style: { color: 'rgb(50, 50, 50)' }
}
This way you can toggle the font with the components state as you wish or simply keep it constant.
<TextField
label="Title"
onChange={updateTitle}
value={title}
disabled={true}
inputProps={fontColor}/>
import { TextField, styled } from '#mui/material'
const CustomTextField = styled(TextField)({
'& .MuiInputBase-root.Mui-disabled': {
backgroundColor: '#f0f0f0',
},
});
Then use them as standard component
<CustomTextField
name="manual"
label="Manual"
size="small"
disabled={watch({}).platform === 'manual' ? false : true}
/>
if u use RHF with controller, mean u create custom TextField using RHF, u just change the component inside the styled()
For example:
import RHFTextField from "../RHFTextField"
const CustomTextField = styled(RHFTextField)({
'& .MuiInputBase-root.Mui-disabled': {
backgroundColor: '#f0f0f0',
},
});
with background color changes, it will more visible..
In the Mui-v5 above solution is not working.
Below are the solutions for Mui-v5.
Solution 1:
const styles = theme => ({
input: {
"& input.Mui-disabled": {
color: "green"
}
}
});
Solution: 2 (use sx property for the component)
sx={{
"& .MuiInputBase-input.Mui-disabled": {
WebkitTextFillColor: "#000000",
},
}}
eg.
<TextField
fullWidth
disabled=true
variant="outlined"
sx={{
"& .MuiInputBase-input.Mui-disabled": {
WebkitTextFillColor: "#000000",
},
}}
/>
None of all the many answers online worked for me, using MUI v4.
Finally I found a very easy but hacky solution for setting the font color of a disabled TextField component.
The problem is, (at least for Firefox) it will use this weird style cheet:
.css-[...]-MuiInputBase-input-MuiOutlinedInput-input.Mui-disabled {
opacity: 1;
-webkit-text-fill-color: rgba(0, 0, 0, 0.38);
}
I'm too new to this stuff and I don't know how to change it, so my way was to overwrite it:
.css-[...]-MuiFormControl-root-MuiTextField-root input {
-webkit-text-fill-color: rgba(255,255,255,0.6) !important;
color: rgba(255,255,255,0.6);
}
The !important part is important!
In React with MUI v4, it's as simple as that:
const textFieldColor = /*...*/;
const textFieldSX = {
input: {
"-webkit-text-fill-color": `${textFieldColor} !important`,
color: `${textFieldColor} !important`,
},
};
/*...*/
<TextField sx={textFieldSX} />
Just in case, this -webkit-text-fill-color property would turn into color one time, one can use an !important there too.
works (MUIv5):
sx={{
"& .MuiInputBase-input.Mui-disabled": {
WebkitTextFillColor: "#000000",
},
}}
I am trying to change my input field border when I focused to input field.currently it is showing blue.I want to change it to red or other color.
I tried using passing props
function Control(props) {
console.log(props)
return (
<TextField
fullWidth
InputProps={{
inputComponent,
inputProps: {
className: props.selectProps.classes.input,
inputRef: props.innerRef,
children: props.children,
classes:{underline: props.selectProps.classes.underlineInput,
root: props.selectProps.classes.inputRoot,
focused: props.selectProps.classes.focusedLabel,},
...props.innerProps
}
}}
{...props.selectProps.textFieldProps}
/>
);
}
underline: props.selectProps.classes.underlineInput tried to change my input field border color.but it don't work why ?
here is my code
https://codesandbox.io/s/71267zp3l6
Add this class on your CSS file. It uses !important for the override.
.MuiInput-underline-44:after {
border-bottom: 2px solid #9f3063 !important;
}