How can I delete the arrows of a textField number?
this doesn't work:
const useStyles = makeStyles(theme => ({
const theme = createMuiTheme({
MuiInput: {
root: {
"&::-webkit-outer-spin-button, &::-webkit-inner-spin-button": {
"-webkit-appearance": "none",
display: "none"
}
}
}
})
by mean this question this should work, but in my case no
Disable webkit's spin buttons on input type="number"?
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
my textfield is
<TextField
InputProps={{ classes: { input: classes.inputStyle } }}
size="small"
type="number"
but when i've applied my textField grow too much, i want to size be small
CSS approach is right. this style should be applied to the input element and to apply the styles to the input element, target the input class instead of root. And another issue is here you're trying to use makeStyles and createMuiTheme at once which is not right.
To style using createMuiTheme this is the way:
const theme = createMuiTheme({
overrides: {
MuiInput: {
input: {
"&::-webkit-outer-spin-button, &::-webkit-inner-spin-button": {
"-webkit-appearance": "none",
display: "none"
}
}
}
}
});
And then wrap your app within <MuiThemeProvider>.
To do this using makeStyles:
const useStyles = makeStyles((theme) => ({
inputStyle: {
"&::-webkit-outer-spin-button, &::-webkit-inner-spin-button": {
"-webkit-appearance": "none",
display: "none"
}
}
}));
And then target the input class by using InputProps prop.
export default function TextStyle() {
const classes = useStyles();
return (
<div>
<TextField
InputProps={{ classes: { input: classes.inputStyle } }}
type="number"
/>
</div>
);
}
Here is the working demo:
Related
I am trying to change the Material UI DatePicker date text and calendar icon color.
I tried to change it passing style to InputProps, but it worked only for removing border.
Rather than that, nothing changes, I tried to apply style to theme.tsx, but it also didn't help.
Any help will be appreciated.
import * as React from "react";
import Stack from "#mui/material/Stack";
import TextField from "#mui/material/TextField";
import AdapterDateFns from "#mui/lab/AdapterDateFns";
import LocalizationProvider from "#mui/lab/LocalizationProvider";
import DesktopDatePicker from "#mui/lab/DesktopDatePicker";
import { makeStyles, createStyles } from "#material-ui/core";
const useStyles = makeStyles(() =>
createStyles({
noBorder: {
outline: "none",
border: "none",
color: "#fff",
},
})
);
export default function DatePicker() {
const [value, setValue] = React.useState<Date | null>();
const classes = useStyles();
const handleChange = (newvalue: Date | null) => {
setValue(newvalue);
};
return (
<LocalizationProvider dateAdapter={AdapterDateFns}>
<Stack spacing={2}>
<DesktopDatePicker
inputFormat="dd/MM/yyy"
value={value}
onChange={handleChange}
renderInput={(params) => <TextField {...params} />}
InputProps={{
classes: { notchedOutline: classes.noBorder },
}}
/>
</Stack>
</LocalizationProvider>
);
}
1st solution - using sx property
You can set sx property to <TextField/> component in order to overwrite default style properties:
const color = "#c44242";
...
return (
<DatePicker
renderInput={(params) => {
return (
<TextField
{...params}
sx={{
svg: { color },
input: { color },
label: { color }
}}
/>
);
}}
...other props
/>
)
Setting colors with sx prop
2nd solution - providing a custom theme
You can also create a custom theme and overwrite colors inside it:
const theme = createTheme({
components: {
MuiIconButton: {
styleOverrides: {
sizeMedium: {
color
}
}
},
MuiOutlinedInput: {
styleOverrides: {
root: {
color
}
}
},
MuiInputLabel: {
styleOverrides: {
root: {
color
}
}
}
}
});
Then you wrap your component with ThemeProvdier.
Overriding Theme Demo
The solution that worked for me is as follows -
I used the sx property in <TextField/> which is also mentioned by dmitriif.
The implementation looked something like this -
<DateTimePicker
value={value}
onChange={handleChange}
renderInput={(params) => (
<TextField
{...params}
sx={{
svg: { color: '#fff' },
input: { color: '#fff' },
}}
/>
)}
/>
Try to inspect element then you can see the styling of the inspected element. Inspect element is so useful.
I am trying to align a Placeholder to be centered within the Text-Field. Is there a way to do this? applying text-align: center to the input is not centering the placeholder.
You can use the &::placeholder pseudoselector on input classname like below
import React from "react";
import { makeStyles } from "#material-ui/core/styles";
import TextField from "#material-ui/core/TextField";
const useStyles = makeStyles(theme => ({
input: {
"&::placeholder": {
color: "red",
textAlign: "center"
}
}
}));
export default function Inputs() {
const classes = useStyles();
return (
<TextField
placeholder="Placeholder"
InputProps={{ classes: { input: classes.input } }}
/>
);
}
A working sandbox project link
When the user hovers over a Card component, I'd like to show a button on that component that is otherwise invisible. In CSS, I'd do something like this:
.card:hover my-button {
display: block;
}
How do I replicate this in the "Material-UI" way?
All the Material-UI tips I found so far suggest something like this to add hover styling, but this applies the styles to the component that is being hovered over and not a different one.
'&:hover': {
background: 'blue'
}
You can do the exact same thing with CSS using the createMuiTheme:
export const theme = createMuiTheme({
overrides: {
// For label
MuiCard: {
root: {
"& .hidden-button": {
display: "none"
},
"&:hover .hidden-button": {
display: "flex"
}
}
}
}
});
Give the Button inside your Card the className hidden-button and you will get the same thing that you want.
Check it here: https://codesandbox.io/s/mui-theme-css-hover-example-n8ou5
It is not specific to Material UI but a react specific thing. you need a state variable to show/hide your button.
const App = () => {
const [show, setShow] = useState(false);
return (
<Card
onMouseOver={() => setShow(true)}
onMouseOut={() => setShow(false)}>
<CardBody>
// some content
{show && <Button>Click</Button>}
</CardBody>
</Card>
);
}
If you want to define this purely inside of a styled component instead of using either of createMuiTheme or makeStyles, then try the following.
We will give an id to each child component and reference them when defining the behaviour to implement when we hover over the parent component:
const NameCellBox = styled(Box)(({ theme }) => ({
...other styles,
"&:hover #cellBoxLengthTypo": {
display: "none",
},
"&:hover #cellBoxContentTypo": {
display: "inline-block",
},
}));
const CellBoxLengthTypo = styled(Typography)(({ theme }) => ({
fontFamily: theme.typography.fontFamily,
fontSize: theme.typography.h5.fontSize,
}));
const CellBoxContentTypo = styled(Typography)(({ theme }) => ({
display: "none",
fontFamily: theme.typography.fontFamily,
fontSize: theme.typography.h5.fontSize,
}));
const items: string[] = ["andrew", "barry", "chris", "debbie"];
return (
<>
<NameCellBox>
<CellBoxLengthTypo id="cellBoxLengthTypo">+{items.length}</CellBoxLengthTypo>
<CellBoxContentTypo id="cellBoxContentTypo">{items.join(", ")}</CellBoxContentTypo>
</NameCellBox>
</>
);
Found it useful for updating a DataGrid cell in Material UI when hover or other event fired.
I faced this problem today and after I discussed it with my mentor I made this result and it worked well for me. but first, let me tell you the disadvantage of using eventListener like onMouseEnter & on MouseLeave that it will cause so many renders.
I gave the (parent component) a movie-card class and the (child component) a movie-card-content class like the following
// movie-card.css
.movie-card-content {
opacity: 0;
}
.movie-card:hover .movie-card-content {
opacity: 1;
}
MUI allows you to add className prop so I gave the proper classNames
//MovieCard.jsx (component)
import "./movie-card.css";
function MovieCard () {
return (
<Card className="movie-card">
<CardContent className="movie-card-content">...<CardContent>
</Card>
);
}
and that's it 😉
import {
makeStyles
} from '#material-ui/core'
const useStyles = makeStyles(() => ({
root: {
"& .appear-item": {
display: "none"
},
"&:hover .appear-item": {
display: "block"
}
}
}))
export default function MakeTextAppearOnHover() {
const classes = useStyles()
return (
<div className = { classes.root }>
Hello world
<span className = 'appear-item' >
Appearing text Go
</span>
</div>
)
}
This is a material UI example that displays the sub-element on hover of the parent.
I also noticed that using some of the examples above, when using Material UI's makeStyles, the overlay item was flickering a lot when clicked. This solution below does not flicker when sub-element is clicked.
import React from "react"
import { Card, CardActionArea, CardContent, CardMedia } from "#material-
ui/core";
import { makeStyles } from "#material-ui/core/styles";
const useStyles = makeStyles(theme => ({
card: {
// some styles
},
cardAction: {
position: "relative"
},
media: {
// some styles
},
overlay: {
position: "absolute",
top: "85px"
}
}));
const App = () => {
const classes = useStyles();
const [show, setShow] = React.useState(false);
const handleMouseOver = () => {
setShow(true);
};
const handleMouseOut = () => {
setShow(false);
};
return (
<Card>
<CardActionArea
onMouseOver={handleMouseOver}
onMouseOut={handleMouseOut} className={classes.card} >
<CardMedia className={classes.media} component="img" >
// some content
</CardMedia>
<CardContent className={classes.overlay} style={{ display: show ?
'block' : 'none' }>
// some content
</CardContent>
</CardActionArea>
</Card>
);
}
I'm having a really hard time to remove the yellow background on autofill from the Material UI TextField component.
In older versions I did it this way:
const inputStyle = { WebkitBoxShadow: '0 0 0 1000px white inset' };
<TextField
...
inputStyle={inputStyle}
/>
But in the recent version the inputStyle prop was removed and added InputProps instead.
I've tried to remove it this way, but the yellow background color still appears:
import React from "react";
import PropTypes from "prop-types";
import { withStyles } from "#material-ui/core/styles";
import TextField from "#material-ui/core/TextField";
const styles = {
root: {
':-webkit-autofill': {
WebkitBoxShadow: '0 0 0 1000px white inset',
backgroundColor: 'red !important'
}
},
input: {
':-webkit-autofill': {
WebkitBoxShadow: '0 0 0 1000px white inset',
backgroundColor: 'red !important'
}
}
};
const renderTextField = (props) => {
const {
classes,
label,
input,
meta: { touched, error },
...custom
} = props;
return (
<TextField
label={label}
placeholder={label}
error={touched && error}
helperText={touched && error}
className={classes.root}
InputProps={{
className: classes.input
}}
{...input}
{...custom}
/>
);
}
renderTextField.propTypes = {
classes: PropTypes.object.isRequired
};
export default withStyles(styles)(renderTextField);
The replacement for inputStyle would be inputProps:
const inputStyle = { WebkitBoxShadow: "0 0 0 1000px white inset" };
<TextField name="last_name" inputProps={{ style: inputStyle }} />
InputProps vs. inputProps is a common point of confusion. Uppercase "I" InputProps provides props for the Input element within TextField (Input wraps the native input in a div). Lowercase "i" inputProps provides props for the native input element rendered within the Input component. If you want to provide inline styles to the native input element, the code example above will do the trick.
There are also several other ways to do this using classes via withStyles.
If you want to use the className property, again this needs to be on the input (rather than the div wrapping it) in order to have the desired effect. So the following will also work:
const styles = {
input: {
WebkitBoxShadow: "0 0 0 1000px white inset"
}
};
const MyTextField = ({classes}) => {
return <TextField name="email" inputProps={{ className: classes.input }} />;
}
export default withStyles(styles)(MyTextField);
If you want to leverage the ":-webkit-autofill" pseudo-class, you just need to adjust your JSS syntax and add the "&" to reference the selector of the parent rule:
const styles = {
input: {
"&:-webkit-autofill": {
WebkitBoxShadow: "0 0 0 1000px white inset"
}
}
};
const MyTextField = ({classes}) => {
return <TextField name="email" inputProps={{ className: classes.input }} />;
}
export default withStyles(styles)(MyTextField);
You can also leverage either of these class approaches, but using uppercase "I" InputProps via the classes property:
const styles = {
input: {
WebkitBoxShadow: "0 0 0 1000px white inset"
}
};
const MyTextField = ({classes}) => {
return <TextField name="email" InputProps={{ classes: { input: classes.input } }} />;
}
export default withStyles(styles)(MyTextField);
Here is a working example with all of these approaches:
You can add it to a theme on the overrides.
overrides: {
MuiOutlinedInput: {
input: {
'&:-webkit-autofill': {
'-webkit-box-shadow': '0 0 0 100px #000 inset',
'-webkit-text-fill-color': '#fff'
}
}
}
}
I'm currently using MUI.
And I'm having issues trying to change the font color of the multiline TextField.
<TextField className = "textfield"
fullWidth
multiline
label = "Debugger"
rows = "10"
margin = "normal"/>
And the CSS:
.textfield {
background-color: #000;
color: green;
}
However, somehow I only get the black background and the font is still black. Does anyone know how to properly change the font color of a TextField using MUI?
In MUI v5, you can just do this using sx prop:
<TextField sx={{ input: { color: 'red' } }} />
A bit longer approach if you want something more reusable:
const options = {
shouldForwardProp: (prop) => prop !== 'fontColor',
};
const StyledTextField = styled(
TextField,
options,
)(({ fontColor }) => ({
input: {
color: fontColor,
},
}));
<StyledTextField label="Outlined" fontColor="green" />
<StyledTextField label="Outlined" fontColor="purple" />
Live Demo
I referred this page TextField API
And I override the TextField using Classes
const styles = theme => ({
multilineColor:{
color:'red'
}
});
Apply the class to TextField using InputProps.
<TextField
className = "textfield"
fullWidth
multiline
InputProps={{
className: classes.multilineColor
}}
label = "Debugger"
rows = "10"
margin = "normal" />
EDIT In older version you have to specify the key input
<TextField
className = "textfield"
fullWidth
multiline
InputProps={{
classes: {
input: classes.multilineColor
}
}}
label = "Debugger"
rows = "10"
margin = "normal"
/>
Hope this will work.
Using inputProps is correct, as others have posted. Here's a slightly simpler example:
<TextField
multiline
inputProps={{ style: { color: "red" } }}
/* ... */
/>
How to set color property and background property of Text Field
import PropTypes from "prop-types";
import { withStyles } from "#material-ui/core/styles";
import TextField from "#material-ui/core/TextField";
const styles = {
root: {
background: "black"
},
input: {
color: "white"
}
};
function CustomizedInputs(props) {
const { classes } = props;
return (
<TextField
defaultValue="color"
className={classes.root}
InputProps={{
className: classes.input
}}
/>
);
}
CustomizedInputs.propTypes = {
classes: PropTypes.object.isRequired
};
export default withStyles(styles)(CustomizedInputs);
//textfield customization
const CssTextField = withStyles({
root: {
'& .MuiInputBase-root': {
color: 'white',
},
},
})(TextField);
This should work !
import { TextField, makeStyles } from "#material-ui/core";
const useStyles = makeStyles((theme) => ({
input: {
color: "#FFF",
},
}));
const MyInput = () => {
const classes = useStyles();
return (
<TextField
inputProps={{ className: classes.input }}
id="outlined-basic"
label="Write something..."
variant="outlined"
/>
);
};
export default MyInput;
If you are looking for a more generic fix, you can change your theme to contain that color, in my case I needed to change the input background and the disabled as well, so I end up using the ThemeProvider and a custom Theme.
Custom theme
const theme = createTheme({
components: {
MuiInputBase: {
styleOverrides: {
root: {
backgroundColor: '#fff',
'&.Mui-disabled': {
backgroundColor: '#e4e4e4',
},
},
},
},
},
});
const withDefaultTheme =
<P extends object>(Component: React.ComponentType<P>) =>
(props: any) =>
(
<ThemeProvider theme={theme}>
<Component {...props} />
</ThemeProvider>
);
This is working in my case:
import React from 'react';
import { TextField, } from '#mui/material';
import { makeStyles } from "#mui/styles";
const useStyles = makeStyles((theme) => ({
textfield_input: {
color: `#c5cae9 !important`,
}
}));
function Videoedit() {
const classes = useStyles();
return (<div>
<TextField
value={title}
required
label="Title"
variant="filled"
inputProps={{className: classes.textfield_input}}
color="primary"
focused
/>)
</div>;
}
export default Videoedit;
if you are using styled component with TextField then just write this code inside your styled component:
input: {
color: '#ffffff',
},
if you want to change placeholder color:
label: {
color: '#ffffff',
},
Use your Component like below
const MyTextField = withStyles({
root: {
"& .MuiInputBase-root.Mui-disabled": {
color: "rgba(0, 0, 0,0.0)"
},
"& .MuiFormLabel-root.Mui-disabled": {
color: "rgba(0, 0, 0,0.0)"
},
}
})(TextField);
Try below css
.textfield{
color: #000;
}