We Keep Coding

Changing the Material UI's DatePicker's border color

This is my DatePicker from material UI, the only thing I want is to change borderColor. I've tried classes, changing the theme's primary color, using WithStyles.. Nothing seems to work.

The className prop is not applied to the MUI DatePicker component currently. There is an open issue on GitHub for this bug.
Alternatively, you can pass className prop to renderInput prop like:
<DatePicker
label="Birthdate"
defaultValue={new Date()}
renderInput={(params) => (
<TextField {...params} className="myDatePicker" />
)}
/>
and apply the css on fieldset tag like:
.myDatePicker fieldset.MuiOutlinedInput-notchedOutline {
border-color: green;
}
.myDatePicker .Mui-focused fieldset.MuiOutlinedInput-notchedOutline {
border-color: red;
}
You can take a look at this sandbox for a live working example of this usage.

Here is a way to customise the default, hover and active styling for the border color. You can also do the same using styled components. Here is a working codesandbox.
<DatePicker
label="Birthdate"
defaultValue={new Date()}
renderInput={(params) => (
<TextField
{...params}
sx={{
'& .MuiOutlinedInput-root': {
'& fieldset': {
borderColor: 'red',
},
'&:hover fieldset': {
borderColor: 'green',
},
'&.Mui-focused fieldset': {
borderColor: 'purple',
},
},
}}
/>
)}
/>

Change the color of elements in Select from MUI

It seems that there were quite a lot of questions and answers on this topic, but I could not find anything suitable for myself. I ask the community for help.
I'm using the Select component from #mui/material to display the number of records per page. And I'd like to change the color of the window's border when it's clicked, and the background color of the currently selected element.
I marked with a red arrow in the picture those elements that I want to change.
SelectMenuItemsPerPage.jsx
import React from 'react';
import { MenuItem, Select } from "#mui/material";
import { styles } from './SelectMenuItemsPerPageStyles';
export default function SelectMenuItemsPerPage({ pageSize, setPageSize }) {
const handleChange = (event) => {
setPageSize(Number(event.target.value));
};
return (
<Select
value={pageSize}
onChange={handleChange}
sx={styles.Select}
>
<MenuItem value={5}>5</MenuItem>
<MenuItem value={10}>10</MenuItem>
<MenuItem value={25}>25</MenuItem>
<MenuItem value={50}>50</MenuItem>
<MenuItem value={100}>100</MenuItem>
</Select>
);
}

You need to add the following CSS to this page, add this to index.css or globals.css (In the case of Next.js).
The code
.MuiMenuItem-root.Mui-selected {
background: yellow;
}
.MuiTablePagination-select[aria-expanded="true"] {
border: 2px solid green;
}
The output
Play around with the code here

You need to use MenuProps and style it as follows:
<Select
MenuProps={{
sx: {
"&& .Mui-selected": {
color: "red",
background: "rgba(0,233,0,0.2)",
},
},
}}
Here is the complete working example:
<Select
value={val}
MenuProps={{
sx: {
"&& .Mui-selected": {
color: "red",
background: "rgba(0,233,0,0.2)",
},
},
}}
sx={{
"& [aria-expanded=true]":{
background: "rgba(0,233,0,0.2)",
},
}}
onChange={(e) => setVal(e.target.value)}
>
<MenuItem value={5}>5</MenuItem>
<MenuItem selected value={10}>
10
</MenuItem>
<MenuItem value={25}>25</MenuItem>
<MenuItem value={50}>50</MenuItem>
<MenuItem value={100}>100</MenuItem>
</Select>
The output (You can style them as you wish):

I need to change material UI helper text background

you can see in the image below my background color is like gray am text field color is white when I show an error then that text field white color gets extended and the password error shows it's not looking good I need a set like text field white not get extend it error shown below in grey background
<TextField
className={classes.textField}
variant="outlined"
id="outlined-basic"
fullWidth
type={values.hidden ? "password" : "text"}
{...loginForm.getFieldProps("password")}
name="password"
error={loginForm.touched.password && loginForm.errors.password}
helperText={loginForm.touched.password && loginForm.errors.password}
placeholder="Password"
InputProps={{
endAdornment: (
<InputAdornment position="end">
<IconButton
className="icon"
aria-label="toggle password visibility"
onClick={handleClickShowPassword}
onMouseDown={handleMouseDownPassword}
edge="end"
>
{values.hidden ? <VisibilityOff /> : <Visibility />}
</IconButton>
</InputAdornment>
)
}}
/>;
CodeSandBox

You can change the TextField error color and other css properties here:
textfield: {
backgroundColor: "#fff",
"& .MuiFormHelperText-root.Mui-error": { //<--- here
backgroundColor: "red",
margin:0,
paddingLeft: 10
},
},

You may use the FormHelperTextProps props to set style or class to the helper text props
<TextField
....
FormHelperTextProps={{ style: { backgroundColor: 'transparent }}}
/>
Also, if setting className does not work for you (since it works on the parent div) you may want to learn how to use classes props or InputProps props of TextField
https://material-ui.com/api/text-field/

You over overide style of class MuiFormHelperText-root:
import React from "react";
import TextField from "#material-ui/core/TextField";
import { makeStyles } from "#material-ui/core/styles";
import { InputAdornment } from "#material-ui/core";
import PersonIcon from "#material-ui/icons/Person";
const useStyles = makeStyles((theme) => ({
root: {
"& .MuiTextField-root": {
margin: theme.spacing(1),
width: 200
},
"& .MuiFormHelperText-root": {
color: "#000 !important"
}
},
bg: {
backgroundColor: "#7986cb"
},
textfield: {
backgroundColor: "#fff"
}
}));
export default function ValidationTextFields() {
const classes = useStyles();
return (
<form className={classes.root} noValidate autoComplete="off">
<div className={classes.bg}>
<TextField
className={classes.textfield}
placeholder="Email"
variant="outlined"
fullWidth
name="username"
error
helperText={"error!"}
type="text"
id="outlined-basic"
InputProps={{
endAdornment: (
<InputAdornment position="end">
<PersonIcon />
</InputAdornment>
)
}}
/>
</div>
</form>
);
}

This can also achieved in css file
.MuiFormHelperText-root.Mui-error {
opacity: 1;
color: rgba(255, 109, 109, 1);
font-family: 'Open Sans';
font-size: 10px;
font-weight: 600;
font-style: italic;
letter-spacing: 0px;
text-align: left;
/* background-image: url('../../../assets/error.png');
background-repeat: no-repeat;
padding-left: 20px;
padding-top: 2px;*/
}
In jsx file,
<FormHelperText id="component-helper-text">
{validEmail ? ' ' : errorMessageEmail}
</FormHelperText>

ReactJS: How to change placeholder font size of Material Ui Autocomplete?

I want to change the placeholder fontsize of Material Ui Autocomplet. Is there any way?
<Autocomplete
multiple
id="tags-outlined"
options={top100Films}
getOptionLabel={(option) => option.title}
defaultValue={[top100Films[13]]}
filterSelectedOptions
size="small"
renderInput={(params) => (
<TextField
{...params}
variant="outlined"
placeholder="Enter Transshipment Ports"
/>
)}
/>

In your example, you can target the input element of the component you render in renderInput which is TextField using makeStyles
const useStyles = makeStyles({
customTextField: {
"& input::placeholder": {
fontSize: "20px"
}
}
})
<TextField
classes={{ root: classes.customTextField }}
{...params}
variant="outlined"
placeholder="Enter Transshipment Ports"
/>
Example below using forked MUI demo

You can just add the ::placeholder css to the class/id of the input field, and change the font-size
Example:
#tags-outlined::placeholder {
font-size: 14px;
}

The sx property allows users to override the styling applied to the MuiFormLabel-root object, including the font size. This is useful for creating custom labels that better suit the user's design needs.
<TextField
{...props}
sx={{
'& .MuiFormLabel-root': {
fontSize: '0.8rem',
},
}}
/>

How to style adornment in MUI TextField?

I am trying to add just the default 14px padding-left set by startAdornment and want to make it so the adornment takes up half of the TextField instead. I can't seem to figure out how to style the startAdornment in general.
I tried style the div itself, this works but there is still an underlying 14px padding left. I tried styling the InputAdornment itself but it seems to have no effect.
InputProps={
this.state.didChange[rowIndex] ? {
startAdornment: (
<InputAdornment
position="start"
component="div"
style={{paddingLeft: '-14px'}}
disablePointerEvents>
<div style={{ backgroundColor: '#D3D4D0', marginLeft: '-14px', padding: "10px 13px", width: "26px", color: '#a1a39b' }}>
{prevVals[rowIndex]}
</div>
</InputAdornment>
)
} : null} />
This is the result of my current code:
This is what I want:
You can ignore the border color difference that doesn't matter I can change that.

there are adornedStart and adornedEnd classes in FilledInput and OutlinedInput classes.so you can either use them or use TextField
InputProps dependig on what variant you use.
<TextField
name={'text'}
variant="outlined"
InputProps={{
endAdornment:
<IconButton onClick={()=>0}>x</IconButton>,
classes: {
adornedEnd: classes.adornedEnd
}
}}
/>
here is CodeSandbox

You can change the background color of the InputAdornment by removing the padding left of the OutlinedInput and set a matching padding in your adornment (based on the padding of the input here);
import MuiTextField from '#mui/material/TextField';
import { styled } from '#mui/material/styles';
const TextField = styled(MuiTextField)(({ theme }) => ({
'& .MuiOutlinedInput-root': {
paddingLeft: 0,
},
'& .MuiInputAdornment-root': {
backgroundColor: theme.palette.divider,
padding: '28px 14px',
borderTopLeftRadius: theme.shape.borderRadius + 'px',
borderBottomLeftRadius: theme.shape.borderRadius + 'px',
},
}));
<TextField
placeholder="Password"
InputProps={{
startAdornment: (
<InputAdornment position="start">
<Visibility />
</InputAdornment>
),
}}
/>