I am working on project in which I have to use Material UI, just for simplicity, consider I am having a simple functional component in which I am having 2 Material UI components Button and Text Field
import React from 'react';
import { Button, TextField } from '#material-ui/core';
function RenderComponent(){
return(
<>
<Button variant="contained">Contained</Button>
<TextField id="outlined-basic" label="Outlined" variant="outlined" />
</>
)
}
export default RenderComponent
Can anyone please tell me how to override the css properties of these 2 Material UI components.
Thankyou 🙏
There are several ways to do this, you can directly override the built-in CSS class of an MUI component using the class name in your imported CSS file, for example in if you want to change the Button component's style, you can do this by applying your required CSS properties to .MuiButton-root class on your "CSS" file. Like bellow.
.MuiButton-root{
color: white;
height: 20px;
padding: 10px;
}
You can also use the available props of a component, you can easily find them in their individual documentation page of mui site.
Again you can use makeStyles or styled to style your component.
Here is an example to use makeStyles in your Button component.
import React from 'react';
import { makeStyles } from '#material-ui/core/styles';
import { Button, TextField } from '#material-ui/core';
const useStyles = makeStyles({
root: {
background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
border: 0,
borderRadius: 3,
boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
color: 'white',
height: 48,
padding: '0 30px',
},
});
function RenderComponent(){
const classes = useStyles();
return(
<>
<Button className={classes.root} variant="contained">Contained</Button>
<TextField id="outlined-basic" label="Outlined" variant="outlined" />
</>
)
}
export default RenderComponent
You can find more about styles here.
Give them id's/classes and write your custom CSS for them. If it doesn't override the standard Material-UI styles, add the keyword !important. If you are using create-react-app, you can import CSS right to the file like this:
import "./styles.css";
If this doesn't help, that means Material-UI uses inline styles for the elements. In this case, you would have to write your CSS right into your components' attributes: like this. If it doesn't override standard styles, use !important again.
I want to change the width of the tooltip, but I can't.
How do I do this?
import React, { FunctionComponent } from 'react';
import {Tooltip} from "antd";
import 'antd/dist/antd.css';
export interface Props {
tooltipeText: string
}
const hintWithTooltipeStyle = {
position: 'relative' as 'relative',
left: 5,
top: 1
};
const HintWithTooltipe: FunctionComponent<Props> = ({
tooltipeText
}: Props) => {
return (
<span style={hintWithTooltipeStyle}>
<Tooltip placement="rightTop" title={tooltipeText} style={{width: 700, maxWidth: '500px !important'}}>
<Button>Ant design</Button>
</Tooltip>
</span>
);
};
export default HintWithTooltipe;
Inline styles don't work.
No styles work at all
You can do it like this without css class:
<Tooltip placement="rightTop" title={tooltipeText} overlayStyle={{maxWidth: '500px'}}>
<Button>Ant design</Button>
</Tooltip>
The antd Tooltip can be adapted by overriding values in css class .ant-tooltip-inner.
.ant-tooltip-inner {
color: yellow;
background-color: green;
width: 200px;
}
Here is a working CodeSandBox have a look at the index.css file for changes.
Or you could access overlayInnerStyle property from Tooltip.
<Tooltip overlayInnerStyle={{width: '250px'}} title={`tootltip text`}>
Info Text
</Tooltip>
You should use min-width for changing inside border
overlayStyle={{ maxWidth: '260px' }}
I have a react project (which was not bootstrapped from CRA) which uses antd and styled components.
EDIT:
Components rendered 'under' a route do not apply styles from styled components.
I initially thought that antd, the ui framework I am using was overwriting the styled components styles but I discovered something interesting; If I add a styled component to the header component it works just fine but if I add a styled component to any component rendered on a route, the styles are not applied.
My main App component has the following structure:
import React, { Fragment } from 'react';
import { ConnectedRouter } from 'connected-react-router';
import { history } from '../store/config';
...
const App = () => {
return (
<ConnectedRouter history={history}>
<Fragment>
<Header />
<Routes />
</Fragment>
</ConnectedRouter>
);
};
For completeness, the routes component looks like this:
import React from 'react';
import { Route, Switch, withRouter } from 'react-router-dom';
import HomePage from '../components/pages/HomePage';
import EditorPage from '../components/pages/EditorPage';
export const Routes = () => {
return (
<Switch>
<Route exact path="/" component={withRouter(HomePage)} />
<Route exact path="/editor" component={withRouter(EditorPage)} />
</Switch>
);
};
export default Routes;
The example below is code I've added to the HomePage component.
package versions in use:
"antd": "^4.3.4",
"history": "^4.10.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-router-dom": "^5.1.2",
"redux": "^4.0.5",
"styled-components": "^5.1.1",
END EDIT.
For some reason the styles from styled components are overwritten by antd unless I place the styles inline.
For example, in the following code snippet the border does not get applied. A super basic example but it demo's the point.
const HomePage = () => {
render(
<Container>
Hello
</Container>
);
};
const Container = styled.div`
border: 1px solid red;
`;
It renders like this:
Looking in dev tools the style doesn't even show up.
But if I add the style inline like this:
<Container style={{ border: '1px solid red' }}>
Boom! red border:
What am I missing??
Of course any help or suggestions is greatly appreciated!
I read the docs of styled-components and I think this is the problem.You should use style before render.
const Button = styled.button`
background: transparent;
border-radius: 3px;
border: 2px solid palevioletred;
color: palevioletred;
margin: 0.5em 1em;
padding: 0.25em 1em;
${props => props.primary && css`
background: palevioletred;
color: white;
`}
`;
const Container = styled.div`
text-align: center;
`
render(
<Container>
<Button>Normal Button</Button>
<Button primary>Primary Button</Button>
</Container>
);
Look at the above example that appears on the page.
You can write styled like:
const Container = styled.div`
&& {
border: 1px solid red;
}
`
Is it possible to style Material-UI without using the makeStyles feature, for example, css? Just trying to understand how Material-UI style works.
The red style on the bottom is the style I'm trying to achieve with simple css here.
Below is an example of how to customize the various colors in an outlined select using simple CSS.
styles.css
.customSelect {
width: 200px;
}
.customSelect .MuiInputLabel-root {
color: red;
}
.customSelect .MuiInputBase-input {
color: green;
}
.customSelect .MuiOutlinedInput-notchedOutline {
border-color: red;
}
.customSelect:hover .MuiOutlinedInput-notchedOutline {
border-color: orange;
}
.customSelect
.MuiOutlinedInput-root.Mui-focused
.MuiOutlinedInput-notchedOutline {
border-color: purple;
}
.customSelectMenu .MuiMenuItem-root {
color: blue;
}
App.js
import React from "react";
import "./styles.css";
import TextField from "#material-ui/core/TextField";
import MenuItem from "#material-ui/core/MenuItem";
export default function App() {
const [value, setValue] = React.useState("");
return (
<TextField
className="customSelect"
label="Sale Type"
required
select
value={value}
onChange={event => setValue(event.target.value)}
variant="outlined"
SelectProps={{ MenuProps: { className: "customSelectMenu" } }}
>
<MenuItem value={1}>Sale Type 1</MenuItem>
<MenuItem value={2}>Sale Type 2</MenuItem>
</TextField>
);
}
Related answers:
Change border color on Material-UI TextField
Global outlined override
Change outline for OutlinedInput with React material-ui
index.js
import React from 'react'
import TextField from '#material-ui/core/TextField'
import style from './style'
import withStyles from 'hoc/withStyles'
import { connect } from 'react-redux'
class SearchField extends React.Component {
constructor (props) {
super(props)
this.onChange = this.onChange.bind(this)
}
onChange (event) {
const { dispatcher } = this.props
this.props.dispatch(dispatcher(event.target.value))
event.preventDefault()
}
render () {
const { classes, placeholder } = this.props
return (
<TextField
label={placeholder}
placeholder={placeholder}
InputProps={{ classes: { input: classes.resize } }}
className={classes.textField}
margin="normal"
autoFocus={true}
variant="outlined"
onChange={this.onChange}
/>
)
}
}
export default withStyles(style)(connect()(SearchField))
style.js
export default function () {
return {
container: {
display: 'flex',
flexWrap: 'wrap'
},
textField: {
width: 'auto'
},
resize: {
fontSize: 11
}
}
}
https://material-ui.com/api/text-field/
How can I change TextField height? I can't find it in the documentation. When I try to change it directly in CSS it works incorrectly (it looks like this - selected height on the screen 26px).
What should I do?
You can try out adding the size="small" which is mentioned in the Textfield API
<TextField variant="outlined" size="small" / >
The other answer is useful but didn't work for me because if a label is used in an outlined component (as it is in the question) it leaves the label uncentered. If this is your usecase, read on.
The way the <label> component is styled is somewhat idiosyncratic, using position: absolute and transform. I believe it's done this way to make the animation work when you focus the field.
The following worked for me, with the latest material-ui v4 (it should work fine with v3 too).
// height of the TextField
const height = 44
// magic number which must be set appropriately for height
const labelOffset = -6
// get this from your form library, for instance in
// react-final-form it's fieldProps.meta.active
// or provide it yourself - see notes below
const focused = ???
---
<TextField
label="Example"
variant="outlined"
/* styles the wrapper */
style={{ height }}
/* styles the label component */
InputLabelProps={{
style: {
height,
...(!focused && { top: `${labelOffset}px` }),
},
}}
/* styles the input component */
inputProps={{
style: {
height,
padding: '0 14px',
},
}}
/>
Notes
I just used inline styles rather than the withStyles HOC, as this approach just seems simpler to me
The focused variable is required for this solution - you get this with final-form, formik and probably other form libraries. If you're just using a raw TextField, or another form library that doesn't support this, you'll have to hook this up yourself.
The solution relies on a magic number labelOffset to center the label which is coupled to the static height you choose. If you want to edit height, you'll also have to edit labelOffset appropriately.
This solution does not support changing the label font size. You can change the input font size, only if you're fine with there being a mismatch between that and the label. The issue is that the size of the 'notch' that houses the label in the outlined border is calculated in javascript according to a magic number ratio that only works when the label font size is the default. If you set the label font size smaller, the notch will also be too small when the label shows in the border. There's no easy way to override this, short of repeating the entire calculation yourself and setting the width of the notch (the component is fieldset > legend) yourself via CSS. For me this wasn't worth it, as I'm fine with using the default font sizes with a height of 44px.
The component takes a multiline prop which is a boolean. Set this to true, and then set the component's rows prop to a number.
<TextField
multiline={true}
rows={3}
name="Description"
label="Description"
placeholder="Description"
autoComplete="off"
variant="outlined"
value={description}
onChange={e => setDescription(e.target.value)}
/>
You didn't show how you tried to specify the height, but the approach you used for font-size is the right approach.
Here's an example showing two text fields with different heights:
import React from "react";
import ReactDOM from "react-dom";
import TextField from "#material-ui/core/TextField";
import { withStyles } from "#material-ui/core/styles";
const styles = {
input1: {
height: 50
},
input2: {
height: 200,
fontSize: "3em"
}
};
function App(props) {
return (
<div className="App">
<TextField
variant="outlined"
InputProps={{ classes: { input: props.classes.input1 } }}
/>
<TextField
variant="outlined"
InputProps={{ classes: { input: props.classes.input2 } }}
/>
</div>
);
}
const StyledApp = withStyles(styles)(App);
const rootElement = document.getElementById("root");
ReactDOM.render(<StyledApp />, rootElement);
And here is a code sandbox with the same code so you can see it running.
First of all, my heart goes out to any poor soul in this thread who has found themselves fighting against the awkward design of the MUI components. Second, if you're using themes AND the "filled" variant of TextField, this solution might work for you. Using the Chrome Dev Tools, I found success adjusting the height of the divs with the classes "MuiFormControl-root" and "MuiInputBase-root". This is what my code looks like (results may vary):
const theme = createMuiTheme({
overrides: {
MuiFormControl: {
root: {
height: '56px',
},
},
MuiInputBase: {
root: {
height: '56px',
},
},
},
})
<TextField
id="outlined-multiline-static"
label="Multiline"
multiline
fullWidth
defaultValue="Default Value"
inputProps={{
style: {
height: "600px",
},
}}
/>
To make it narrower, set a height, and add a "dense" margin prop on the TextField to keep the label aligned correctly:
<TextField margin="dense" style={{ height: 38 }} />
With material-ui v4+, you have to adjust the input padding and the label position to get what you whant.
<TextField label="Label" variant="outlined" />
Suppose we want the above TextField to be 48px height (it's default size is 56px), we just have to do (56px - 48px) / 2 = 4px and in our css file:
.MuiTextField-root input {
/* 14.5px = 18.5px - 4px (note: 18.5px is the input's default padding top and bottom) */
padding-top: 14.5px;
padding-bottom: 14.5px;
}
.MuiTextField-root label {
top: -4px;
}
.MuiTextField-root label[data-shrink='true'] {
top: 0;
}
For styled-components users, all the above block of code can be defined as Sass mixins that can be re-used throughout the code base
import { css } from 'styled-components'
const muiTextFieldHeight = (height: number) => {
const offset = (56 - height) / 2
return css`
input {
padding-top: calc(18.5px - ${offset}px);
padding-bottom: calc(18.5px - ${offset}px);
}
label {
top: -${offset}px;
}
label[data-shrink='true'] {
top: 0;
}
`
}
Then somewhere in your stylesheet
.MuiTextField-root {
${muiTextFieldHeight(40)} /* set TextField height to 40px */
}
This works with material-ui v3,
<div className="container">
<TextField
label="Full name"
margin="dense"
variant="outlined"
autoFocus
/>
</div>
.css
.container input {
height: 36px;
padding: 0px 14px;
}
.container label {
height: 36px;
top: -6px;
}
.container label[data-shrink="true"] {
top: 0;
}
https://codesandbox.io/s/elated-kilby-9s3ge
With React and "#mui/material": "^5.2.2",
import * as React from 'react';
import TextField from '#mui/material/TextField';
export default function BasicTextFields() {
return (
<TextField
label="Outlined"
variant="outlined"
InputLabelProps={{
style: {
fontSize: 14,
backgroundColor: '#FFF',
paddingLeft: 4,
paddingRight: 4,
color: '#383838',
},
}}
inputProps={{
style: {
fontSize: 14,
height: 40,
width: 272,
padding: '0 14px',
fontWeight: 'bold'
},
}}
/>
);
}
CSS
.MuiTextField-root{
border: 1px solid $BORDER_COLOR_2;
border-radius: 6px;
height: 40px;
box-shadow: 0px 2px 3px $BOX_SHADOW_1;
color: $TEXT_COLOR_3;
font-size: 14px;
font-weight: bold;
}
.MuiTextField-root label {
top: -6px;
}
.MuiTextField-root label[data-shrink='true'] {
top: 0;
}
Changing the height is simple, can be achieved using
InputProps={{style: { fontSize: '1.8rem', height: 70 },
But that isn't enough, because the label(placeholder in this case) will not be centered.
Label can be centered using:
sx={{'.MuiFormLabel-root[data-shrink=false]': { top: <put desired value here>} }}