my material-ui text field is displaying the wrong width:
My styling:
const useStyles = makeStyles((theme) => ({
root: {
'& > *': {
margin: theme.spacing(1),
},
},
input: {
backgroundColor: "white",
},
textfield: {
color: "white",
width: "400px",
marginBottom: theme.spacing(3)
},
textfieldLabel: {
color: "white",
}
}));
My components:
return (
<div>
<form className={classes.root} noValidate autoComplete="off">
<TextField className={classes.textfield} InputProps={{className: classes.input}} InputLabelProps={{className: classes.textfieldLabel}} id="url-textfield" label="URL" variant="standard"/>
</form>
</div>
);
I have tried the default styling of the documentation and even that doesn't work. What am i doing wrong?
Related
I'm using a DatePicker component from Mui Lab and I am trying to style the Calendar component by adding some border or background color. I used the PaperProps prop for DatePicker but it's not styling it. Trying to understand why I cant just use an SX prop for it
this is the calendar where i want to add a border to
import PropTypes from 'prop-types';
import { TextField } from '#material-ui/core';
import { alpha } from '#material-ui/core/styles';
import DatePicker from '#material-ui/lab/DatePicker';
import { AppBorderStyle } from '../theme';
export const DateField = (props) => {
const {
error,
fullWidth,
helperText,
label,
onChange,
onBlur,
placeholder,
disabled,
value,
name,
...other
} = props;
return (
<DatePicker
PopperProps={{
sx: {
'& .MuiPaper-root': {
backgroundColor: 'red',
border: '1px solid black',
}
}
}}
onChange={onChange}
renderInput={({ InputProps, ...rest }) => (
<TextField
{...rest}
disabled={disabled}
onBlur={onBlur}
name={name}
error={error}
fullWidth={fullWidth}
helperText={helperText}
label={label}
placeholder={placeholder}
sx={{
'& .MuiFilledInput-root': {
backgroundColor: 'background.paper',
borderRadius: 1,
border: AppBorderStyle,
px: 1.5,
py: 0.75,
transition: (theme) => theme.transitions.create([
'border-color',
]),
'&:hover': {
backgroundColor: 'background.paper'
},
'&.Mui-focused': {
backgroundColor: 'background.paper',
boxShadow: (theme) => `${alpha(theme.palette.primary.main,
0.25)} 0 0 0 0.2rem`
},
'& .MuiFilledInput-input': {
fontSize: 14,
height: 'unset',
lineHeight: 1.6,
p: 0
},
'&.Mui-disabled': {
backgroundColor: 'action.disabledBackground',
boxShadow: 'none',
borderColor: alpha('#D6DBE1', 0.5)
}
}
}}
variant="filled"
InputProps={{
disableUnderline: true,
...InputProps
}}
InputLabelProps={{
shrink: true,
sx: {
color: 'text.primary',
fontSize: 14,
fontWeight: 500,
mb: 0.5,
position: 'relative',
transform: 'none'
}
}}
/>
)}
value={value}
{...other}
/>
);
};
DateField.defaultProps = {
disabled: false,
};
DateField.propTypes = {
disabled: PropTypes.bool,
error: PropTypes.bool,
fullWidth: PropTypes.bool,
helperText: PropTypes.string,
label: PropTypes.string,
name: PropTypes.string,
onChange: PropTypes.func.isRequired,
onBlur: PropTypes.func.isRequired,
placeholder: PropTypes.string,
value: PropTypes.instanceOf(Date)
};
I noticed you're using depecrated version of mui as you can check here. For newer versions of material UI components, we import material components from #mui and not from #material-ui.
I'm not sure if the classes are the same in your version or not. But the issue for your case looks like you are targeting the wrong class to add a border. You need to target MuiPickersPopper-root class to change the border.
PopperProps={{
sx: {'&.MuiPickersPopper-root': {border: '4px solid red'},},
}}
I created a solution of DatePicker with the border here. Cheers!
I have this project and I want to make a sidebar and inside the sidebar there are icons and a word that expresses this icon, the problem is that when I wanted to change the size of the icon in the “useStyles()” it didn’t change its size and I didn’t know why.
How can I solve this problem?
const useStyles = makeStyles((theme) => ({
item: {
display: "flex",
alignItems: "center",
marginBottom: theme.spacing(4),
[theme.breakpoints.up("sm")]: {
marginBottom: theme.spacing(3),
cursor: "pointer",
},
},
icon: {
marginRight: theme.spacing(1),
[theme.breakpoints.up("sm")]:{
fontSize: "18px"
}
},
text: {
fontWeight: 500,
[theme.breakpoints.down("sm")]: {
display: "none",
},
},
container: {
height: "100vh",
paddingTop: theme.spacing(2),
color: "white",
backgroundColor: theme.palette.primary.main,
[theme.breakpoints.up("sm")]:{
backgroundColor: 'white',
color: '#555',
border: '1px solid #ece7e7'
}
},
}));
const LeftBar = () => {
const classes = useStyles();
return (
<Container className={classes.container}>
<div className={classes.item}>
<Home className={classes.icon} />
<Typography className={classes.text}>HomePage</Typography>
</div>
<div className={classes.item}>
<Home className={classes.icon} />
<Typography className={classes.text}>HomePage</Typography>
</div>
<div className={classes.item}>
<Home className={classes.icon} />
<Typography className={classes.text}>HomePage</Typography>
</div>
<div className={classes.item}>
<Home className={classes.icon} />
<Typography className={classes.text}>HomePage</Typography>
</div>
</Container>
);
};
export default LeftBar;
If you want a quick fix, give your icon the sx prop and put your desired font size there.
<Home sx={{fontSize:"18px"}}/>
Otherwise make sure that your import statements are correct.
... from "#mui/material/styles"
Usually I use the mui styled for breakpoints, so something like
const IconWrapper = styled("div")(({ theme }) => ({
marginRight: theme.spacing(1),
[theme.breakpoints.up("sm")]: {
fontSize: 18,
},
}));
Then implement it like
<IconWrapper>
<Home />
</IconWrapper>
I want to scroll on the background, when my dialog component opens up. By default, you cannot scroll when the dialog appears. How can I scroll in the background ?
Following is the Code:-
import React, { useState } from 'react';
import {
makeStyles,
Grid,
Button,
Dialog,
DialogActions,
DialogTitle,
} from '#material-ui/core';
import ShoppingCartIcon from '#material-ui/icons/ShoppingCart';
import CloseIcon from '#material-ui/icons/Close';
const styles = makeStyles((theme) => ({
root: {
position: 'fixed',
bottom: '0 ',
left: '0',
right: '0',
boxShadow: '0 0 6px rgb(0 0 0 / 70%)',
backgroundColor: 'white',
height: '63px',
},
textStyle: {
fontFamily: 'Comfortaa',
},
icon: {
color: theme.palette.primary.dark,
},
btn: {
backgroundColor: theme.palette.primary.dark,
color: 'white',
fontFamily: 'Comfortaa',
'&:hover': {
backgroundColor: theme.palette.primary.dark,
},
},
title: {
display: 'flex',
justifyContent: 'flex-end',
borderBottom: '1px solid #e5e5e5',
},
closeIcon: {
color: theme.palette.primary.light,
'&:hover': {
color: 'black',
},
},
dialogStyle: {
backgroundColor: 'white',
position: 'absolute',
top: 0,
},
dialogContainer: {
opacity: 0,
},
dialogTitle: {
display: 'flex',
justifyContent: 'flex-end',
borderBottom: '1px solid #e5e5e5',
},
}));
const CartAppBar: React.FC = () => {
const classes = styles();
const [open, setOpen] = useState(false);
const handleClickOpen = () => {
setOpen(true);
};
const handleClose = () => {
setOpen(false);
};
return (
<>
<Grid
item
container
direction='row'
justify='space-around'
alignItems='center'
className={classes.root}
xs={12}
>
<div>
<ShoppingCartIcon
fontSize='large'
classes={{ root: classes.icon }}
onClick={handleClickOpen}
/>
</div>
<div>
<Button
className={classes.btn}
type='submit'
onClick={() => {
return (window.location.href = '/checkout');
}}
>
Checkout
</Button>
</div>
</Grid>
<Dialog
open={open}
onClose={handleClose}
aria-labelledby='alert-dialog-title'
aria-describedby='alert-dialog-description'
maxWidth='md'
fullWidth
classes={{
paper: classes.dialogStyle,
container: classes.dialogContainer,
}}
scroll='paper'
>
<DialogTitle className={classes.dialogTitle}>
<CloseIcon
onClick={handleClose}
classes={{ root: classes.closeIcon }}
/>
</DialogTitle>
{/* Footer */}
{/* <DialogActions className={classes.footer}>
<Button classes={{ root: classes.btn }}>Add To Cart</Button>
</DialogActions> */}
</Dialog>
</>
);
};
export default CartAppBar;
As you can see in the photo, there's opacity in the background and you cannot scroll. I want to override this and make the background scrollable
use disableScrollLock as prop will help
Hi How to disabled the inner rectangular border for TextField in React. I do not know why the inner one stays there. I have tried different solutions but it doe not work
This is the style
const useStyles = makeStyles({
inputField: {
"& label.Mui-focused": {
color: "tomato",
},
"& label": {
color: "tan",
},
"& .MuiOutlinedInput-root": {
"& fieldset": {
borderColor: "tan",
},
"&:hover fieldset": {
borderColor: "tan",
},
"& .Mui-focused fieldset": {
borderColor: "tan",
},
},
},
});
This is the main
const Register = () => {
return (
<div>
<h1>New User Registration</h1>
<form className={classes.root} noValidate autoComplete="off">
<TextField
border-style={"solid"}
className={classes.inputField}
label={"Email Address"}
variant={"outlined"}
onChange={(e) => setEmail(e.target.value)}
>
</TextField>
</form>
</div>
);
};
I have the following issue. I'm using Material-UI Autocomplete in my project. I made some alterations so the font and the component resize when the viewport changes size. Thus I've used vw on widths,heights and font-sizes. However, as you can see in the gif bellow, when I resize the gap between the green sauce and the blue/red spaces increases. how can I make sure that the gap also follows the initial proportion? So basically what I would like is that the whole component shrunk and the gap didn't increase. I've been altering all kinds of heights/margins but I can't seem to solve the issue. You have all the code available on the following sand box.
https://2y3jh.csb.app
You need to alter the input height to 3vw so that the height is consistent.
import TextField from "#material-ui/core/TextField";
import Autocomplete from "#material-ui/lab/Autocomplete";
import { makeStyles } from "#material-ui/core/styles";
const useStyles = makeStyles({
input: {
width: "100%",
height: "3vw", // Changed from 2vw
fontSize: "1.25vw",
color: "#02112E",
backgroundColor: "green"
},
option: {
fontSize: "0.8vw",
height: "3vw",
width: "100%",
color: "#02112E"
},
noOption: {
fontSize: "0.8vw",
height: "3vw",
width: "100%",
color: "#02112E"
},
root: {
"& label + .MuiInput-formControl": {
marginTop: "1vw"
},
"& label.Mui-focused": {
color: "#02112E",
fontSize: "0.97vw"
},
"& .MuiInput-underline:after": {
borderBottomColor: "#02112E",
borderBottomWidth: "0.21vw",
left: "0",
transformOrigin: "left center",
transition: "all 0.3s ease"
},
"& .MuiInput-underline:before": {
borderBottomColor: "#02112E",
borderBottomWidth: "0.07vw"
},
"& .MuiInput-underline:hover::before": {
borderBottomColor: "#02112E",
borderBottomWidth: "0.07vw"
},
fontSize: "1.25vw",
width: "100%",
height: "3vw",
backgroundColor: "red"
},
inputRoot: {
color: "#02112E",
fontSize: "1.25vw",
backgroundColor: "blue",
transform: "translate(0, 2vw) scale(1)"
}
});
export default function StyledAutoComplete() {
const classes = useStyles();
return (
<Autocomplete
style={{ width: "60%" }}
options={list}
classes={{
root: classes.root,
option: classes.option,
noOptions: classes.noOption,
input: classes.input
}}
disableClearable
freeSolo
noOptionsText={"No Options"}
autoHighlight
getOptionLabel={(option) => option.title}
renderOption={(option) => <React.Fragment>{option.title}</React.Fragment>}
renderInput={(params) => (
<TextField
style={{ width: "100%" }}
{...params}
label="Option"
variant="standard"
inputProps={{
...params.inputProps,
autoComplete: "new-password" // disable autocomplete and autofill
}}
InputLabelProps={{
classes: {
root: classes.inputRoot
}
}}
/>
)}
/>
);
}
const list = [{ title: "opt 1" }, { title: "opt 2" }];
Demo: https://2zh36.csb.app/
Output: