I am new to material ui.
I use fifth version.
<InputBase
ref={params.InputProps.ref}
inputProps={params.inputProps}
autoFocus
sx={{
...InputCSS,
}}
/>
const InputCSS = {
width: '100%',
textIndent: '17px',
py: '12px',
fontSize: '20px',
borderRadius: '3px',
border: '1.5px solid rgba(0, 0, 0, 0.4)',
'MuiInputBase-root': { // does not work
borderColor: 'red !important',
color: 'red !important',
},
'&:focus' : { // does not work
...
}
}
I could have used styled('input') and it works, I can set &:focus and it works but I can't type anything in the input.
I want to get rid of the initial border and set focus property.
How can I change the border for this class?
I know that in v5 we can style our components using variants or sx or styled.
What is the best advice for styling mui components? Because almost all the info in the internet uses outdated useStyle or makeStyles which doesn't work with react 18v.
sometimes I just struggle with components styling in mui
You have several ways to customize a Mui component, but my three favorite approaches are:
Styled utility
Sx prop
Custom global theme
So when should I use each of these approaches?
Styled utility
If you want to make a component reusable across your app, go with styled, if you had ever used styled components then styled will be very familiar to you, here is an example of how to use it:
import * as React from 'react';
import Slider, { SliderProps } from '#mui/material/Slider';
import { alpha, styled } from '#mui/material/styles';
// if you are using typescript, don't forget to pass the component props on styled
const SuccessSlider = styled(Slider)<SliderProps>(({ theme }) => ({
width: 300,
color: theme.palette.success.main,
// to override the styles of inner elements,
// you have to use the & selector followed by the class name.
'&.MuiSlider-thumb': {
'&:hover, &.Mui-focusVisible': {
boxShadow: `0px 0px 0px 8px ${alpha(theme.palette.success.main, 0.16)}`,
},
'&.Mui-active': {
boxShadow: `0px 0px 0px 14px ${alpha(theme.palette.success.main, 0.16)}`,
},
},
}));
export default function StyledCustomization() {
return <SuccessSlider defaultValue={30} />;
}
To make the component even more dynamically, you can define custom props as well, like width, color, border and so on, read the styled docs to know more about it.
Sx prop
If you want to make an one time off style in a single component, the easiest way is to use the sx prop, but be careful with this approach because it can lead to a lot of repetition in your code. Following the code you gave:
<InputBase
ref={params.InputProps.ref}
inputProps={params.inputProps}
autoFocus
sx={{
...InputCSS,
}}
/>
const InputCSS = {
width: '100%',
textIndent: '17px',
py: '12px',
fontSize: '20px',
borderRadius: '3px',
border: '1.5px solid rgba(0, 0, 0, 0.4)',
// you should pass the & selector followed by the class that you want to override
'&.MuiInputBase-root': {
// avoid the use of !important
borderColor: 'red',
color: 'red',
},
'&.MuiInputBase-root:focus': {
...
}
}
check it out on codeSandbox. Just a suggestion, depending on your case the component TextField could fit better as it comes with some good styles and you don't need to style it from scratch.
Side note:
Every mui component has an api doc with a css section where you can find all available classes to override, for instance, see the InputBase api docs, also read the docs about sx prop.
Custom theme
At last but not least, if you want to customize your whole app with custom palette, components, typography, breakpoints and so on, no doubt you should use a custom theme, as mui provides a powerful tool called createTheme to do so, what I like the most in custom theme is the possibility to make custom variants of the component, like so:
import * as React from "react";
import { createTheme, ThemeProvider } from "#mui/material/styles";
import Button from "#mui/material/Button";
import { red } from "#mui/material/colors";
// if you are using typescript, you must declare the module with the
// custom properties in order to get access of this property when using the component
declare module "#mui/material/Button" {
// define custom variants
interface ButtonPropsVariantOverrides {
dashed: true;
redVariant: true;
}
}
const defaultTheme = createTheme();
const theme = createTheme({
components: {
MuiButton: {
variants: [
{
// use the variant name defined earlier
props: { variant: "dashed" },
// set the styles for this variant
style: {
textTransform: "none",
border: `2px dashed ${defaultTheme.palette.primary.main}`,
color: defaultTheme.palette.primary.main
}
},
{
props: { variant: "redVariant" },
style: {
border: `2px solid ${red[300]}`,
color: red[600]
}
}
]
}
}
});
export default function GlobalThemeVariants() {
return (
// use the theme provider to get access of custom theme
// and variants within any child component
<ThemeProvider theme={theme}>
<Button variant="dashed" sx={{ m: 1 }}>
Dashed
</Button>
<Button variant="redVariant" color="secondary">
custom red variant
</Button>
</ThemeProvider>
);
}
See the example, also take a look at the custom theme docs. Hope I clarified the things a bit!
I have tried changing the placeholder color of the MaterialUI placeholder color but to no success.
Here is what I have tried so far
const useStyles = makeStyles((theme) => ({
emailField: {
width: 265,
height: 13,
fontWeight: 'bold',
'&::placholder': { //This is meant to change the place holder color to green
color: 'green'
}
}
}));
const classes = useStyles(theme);
.....
// Here is where I am trying to apply the styled class to the input element but to
//No Success
<OutlinedInput
placeholder="name#email.com"
inputProps={{
className: classes.emailField
}}
/>
Any suggestion(s) to getting this right will be really appreciated.
Thank you.
This should be work ,Try this
const useStyles = makeStyles({
customTextField: {
"& input::placeholder": {
color: "green"
},
});
Update
You can make a custom style
const useOutlinedInputStyles = makeStyles({
root: {
"& .MuiOutlinedInput-notchedOutline": {
borderColor: "green"
},
"&.Mui-focused .MuiOutlinedInput-notchedOutline": {
borderColor: "green"
}
}
});
const outlinedInputStyles = useOutlinedInputStyles();
import outlinedInput
import OutlinedInput from "#material-ui/core/OutlinedInput";
<OutlinedInput
classes={outlinedInputStyles}
id="id"
labelWidth={40}
/>
Please fix your spell in style.
From "&::placholder" to "&:placeholder".
Targeting the ::placeholder pseudo selector will not work because the placeholder that you see in Material-UI Input components is actually the label of that input, which is animated on focus by javascript
So in order to change the placeholder color target the .MuiFormLabel-root class in your CSS file then change the color and make sure to import the CSS file into your component
.MuiFormLabel-root {
color: green !important;
}
check this codesandbox to play around
I'm trying to override the font color of a child text field component from it's parent component but haven't been able to do so and not sure why. I created a simple demo project at https://codesandbox.io/s/twilight-waterfall-3okx4?file=/src/SearchBar.js where "fieldone" CSS class defined in "FieldOne.js" sets the font color to red and "fieldoneoverride" CSS class defined in SearchBar.js, where I'm importing the FieldOne.js child component, sets the font color to green. Hoping someone might be able to provide some insight on what I'm doing wrong as I'm a ReactJS newbie. Thanks in advance!
SearchBar.js code snippet
import { makeStyles } from "#material-ui/core/styles";
import FieldOne from "./FieldOne";
const useStyles = makeStyles((theme) => ({
searchbar: {
width: "calc(100% - 300px)",
height: "auto",
float: "left",
flexGrow: "1",
border: "1px solid #989586",
borderRadius: "9999px",
backgroundColor: "#fbfbf8",
margin: "0",
paddingLeft: "30px"
},
fieldoneoverride: {
color: "green !important"
}
}));
export default function SearchBar() {
const classes = useStyles();
return (
<div className={classes.searchbar}>
<FieldOne className={classes.fieldoneoverride} />
</div>
);
}```
First, you need declare props className in your FieldOne:
function BasicTextFields({ className })
Then, update inputProps of TextField in BasicTextFields like this
inputProps={{ className: `${classes.fieldone} ${className}` }}
https://codesandbox.io/s/hopeful-bird-hff2i?file=/src/SearchBar.js
I would like to change the color of the border of the input on focus, but not sure how to achieve it. I can change the styles the component but not when focusing. I´m using material-ui css option.
Here is the code so far:
....
<PhoneInput
country={'pt'}
localization={pt}
specialLabel={field.label}
value={phoneValue}
onChange={phone => setPhoneValue(phone)}
inputStyle={{
'&:focus': {
borderColor: 'red'
}
}}
/>
Sample:
Thanks!
You can change border color by placing a class to containerClass of PhoneInput component. That is, if you you use Material UI you can define a class as following
borderClass: {
"&.react-tel-input .form-control:focus": {
borderColor: "#69e781",
boxShadow: "0px 0px 0px 1px #69e781",
}
}
then use this class as follows
<PhoneInput
containerClass={classes.borderClass}
.
.
/>
or if you use a CSS file you can override the rule below in your CSS file
.react-tel-input .form-control:focus:
The styles on focusing the input of React-Phone-Input exists on .PhoneInputInput class on focus-visible property. In order to override this styling, access the PhoneInputInput Class.
Below example is for the devs using Material UI styled components.
".PhoneInputInput": {
"&:focus-visible": {
outline: "none",
},
}
I'm using react-icons and with Font Awesome icons I managed to change color easily with 2 approaches:
Works with color prop:
<FaUserTimes /* color="#023373" */ className="icone icone-40" />
Works with css:
.icone {
color: #023373;
}
Now, using Grommet icons nothing seems to work, icons are always black
<GrFormAdd color="#023373" className="icones" />
.icones {
font-size: 30px; **Font size works!?**
color: #023373;
}
Full Code : https://codesandbox.io/s/pensive-rgb-r8g1t?file=/src/App.js
For color pass a props (i called it blue) like this.
<Apple color="blue" size="xlarge" />
So on the other end style your icon like this.
const customColorTheme = deepMerge(base, {
icon: {
extend: css`
${(props) =>
props.color === "blue" &&
`
fill: #023373;
`}
`
}
});
If you don't want to use the 'grommet-icons' dependency, but only 'react-icons' :
you can style them with simple css :
svg path {
stroke: #023373;
}