Input textfields height is not changing with in-line css.
<FormControl
sx={{
"& .MuiOutlinedInput-notchedOutline": {
borderColor: "blue",
},
"&.Mui-focused .MuiOutlinedInput-notchedOutline": {
borderColor: "red",
},
"&.label[data-shrink=false]+.MuiInputBase-formControl .MuiInputBase-input-MuiOutlinedInput-input":
{
height: "25px",
},
}}
>
<LocalizationProvider
dateAdapter={AdapterDateFns}
sx={{
BackgroundColor: "red",
}}
>
<DateRangePicker
startText="Start date"
endText="End date"
value={value}
onChange={(newValue) => {
setValue(newValue);
}}
renderInput={(startProps, endProps) => (
<React.Fragment>
<TextField
{...startProps}
/>
<Box sx={{ mx: 2 }}> to </Box>
<TextField {...endProps} />
</React.Fragment>
)}
/>
</LocalizationProvider>
</FormControl>
This is working when changing it in browser
if you change
"&.label[data-shrink=false]+.MuiInputBase-formControl .MuiInputBase-input-MuiOutlinedInput-input":
to
"& .MuiInputBase-input":
it should work
Related
I'm trying to add styling to child components of a React Native View. Since you cant use the > * selector in React Natives StyleSheet.create function how do you achieve this result?
Here is the code of a form I want to style:
<View style={styles.container}>
<View style={styles.centered}>
<Button mode="contained" onPress={onAddItem} style={styles.default}>
Add Item
</Button>
</View>
{showForm ? (
<View style={styles.form}>
<TextInput
label="Title"
returnKeyType="next"
theme={{ colors: { primary: 'blue',underlineColor:'transparent',}}}
style={{ width: 300 }}
value={title.value}
onChangeText={(text) => setTitle({ value: text, error: '' })}
error={!!title.error}
errorText={title.error}
autoCapitalize="none"
/>
<DropDownPicker
label="Select Type"
open={open}
value={value}
items={items}
setOpen={setOpen}
setValue={setValue}
setItems={setItems}
/>
<DropDownPicker
open={open2}
value={value2}
items={condition}
setOpen={setOpen2}
setValue={setValue2}
setItems={setCondition}
/>
<TextInput
label="Quantity"
returnKeyType="next"
theme={{ colors: { primary: 'blue',underlineColor:'transparent',}}}
style={{ width: 300 }}
value={quantity.value}
onChangeText={(text) => setQuantity({ value: text, error: '' })}
error={!!quantity.error}
errorText={quantity.error}
autoCapitalize="none"
/>
</View>
) : null}
</View>
I am using the MUI V5 in a react project and I am trying to center the logo in an AppBar on extra small screens but no mattter what I do nothing seems to be working. The Typography comonent is wrapped inside a ToolBar wrapped inside an AppBar that only appears on xs screens.
Here's my current code.
<Box sx={{ display: 'flex' }}>
<CssBaseline />
<AppBar
elevation={0}
position="fixed"
sx={{
display: { xs: 'flex', sm: 'none' },
width: { sm: `calc(100% - ${drawerWidth}px)` },
ml: { sm: `${drawerWidth}px` },
bgcolor: 'gray',
}}
>
<Toolbar >
<IconButton
color="inherit"
aria-label="open drawer"
edge="start"
onClick={handleDrawerToggle}
sx={{ mr: 2, display: { sm: 'none' } }}
>
<MenuIcon />
</IconButton>
<Typography
variant="h5"
noWrap
component="a"
href=""
sx={{
flexGrow: 1,
bgcolor: 'red',
display: { xs: 'flex', sm: 'none' },
flexGrow: 1,
fontFamily: 'monospace',
fontWeight: 700,
letterSpacing: '.3rem',
color: 'inherit',
textDecoration: 'none',
}}
>
LOGO
</Typography>
</Toolbar>
</AppBar>
I have throw everything I can at it but nothing seems to work. Any help is highly appreaciated.
Best Way to handle spacing with MUI is using Grid component.
Your code would be like this:
return (
<Box sx={{ display: "flex" }}>
<CssBaseline />
<AppBar
elevation={0}
position="fixed"
sx={{
display: { xs: "flex", sm: "none" },
width: { sm: `calc(100% - ${drawerWidth}px)` },
ml: { sm: `${drawerWidth}px` },
bgcolor: "gray",
}}
>
<Toolbar>
<Grid
container
spacing={1}
sx={{ alignItems: "center", justifyContent: "space-between" }}
>
<Grid item xs={4} sx={{ textAlign: "start" }}>
<IconButton
color="inherit"
aria-label="open drawer"
edge="start"
// onClick={handleDrawerToggle}
sx={{ mr: 2 }}
>
<MenuIcon />
</IconButton>
</Grid>
<Grid item xs sx={{ textAlign: "center" }}>
<Typography
variant="h5"
noWrap
component="a"
href=""
sx={{
bgcolor: "red",
fontFamily: "monospace",
fontWeight: 700,
letterSpacing: ".3rem",
color: "inherit",
textDecoration: "none",
}}
>
LOGO
</Typography>
</Grid>
<Grid item xs={4}></Grid>
</Grid>
</Toolbar>
</AppBar>
</Box>
);
MUI Grid docs
Not a big expert in MUI, but try defining the flex direction, then define the align items or justify content to be centre depending on the direction.
I am using yup schema object for field validation in react.
so anyone know how to add color to error message or any other way to add color to requird message
below is the code -
const ValidationSchema = yup.object({name: yup
.string('Enter your name'),
age:yup
.number('Enter your name'),
.required('number required')
})
This is how the form is being used -
const formik = useFormik({
initialValues: {
name: '',
customerId:'',
email:'',
phoneNumber:'',
age: '',
gender: '',
race: '',
state_code: '',
county_code: '',
},
validationSchema: validationSchema,
onSubmit: async (values) => {
let diseases = Object.keys(selectValue).filter((keyName) => selectValue[keyName] === true && keyName)
console.log(responseAPI)
},
});
<form onSubmit={formik.handleSubmit}>
<Grid container rowSpacing={2} columnSpacing={{ xs: 1, sm: 2, md: 3 }} sx={{ marginBottom: '2em' }}>
<Grid item xs={12} md={6} lg={4} sx={{ fontWeight: 'initial', '& .MuiTextField-root': { m: 1, width: '25ch' }, }}>
<ArgonTextField
onChange={formik.handleChange} value={formik.values.name} id="name" type="string" name="name"
placeholder="Name"
/>
</Grid>
<Grid item xs={12} md={6} lg={4} sx={{ fontWeight: 'initial', '& .MuiTextField-root': { m: 1, width: '25ch' }, }}>
<ArgonTextField placeholder="Phone Number"
onChange={formik.handleChange} value={formik.values.phoneNumber} id="phoneNumber" type="number" name="phoneNumber"
/>
</Grid>
</Grid>
<AddCustomerDetails data={values} selectValue={selectValue} setSelectValue={setSelectValue} diseases={diseases} formik={formik} setDiseases={setDiseases}
description={description} setDescription={setDescription}
/>
</form>
so I want number required message color to be red its now black in color.
I'm trying to make an input with an icon on the left. something like this:
I've already created the input. my plan is to add the input and icon in a grid. remove input's border and add it to the grid container.
I'm not able to remove the border. I've tried using the spread operator but I was getting errors.
there are other inputs using the same styles and they need the border.
How can I remove border for this input ?
const useStylesCustom = makeStyles((theme) => ({
root: {
border: '1px solid #e2e2e1',
overflow: 'hidden',
borderRadius: 2,
backgroundColor: '#fff',
transition: theme.transitions.create(['border-color', 'box-shadow']),
'&:hover': {
backgroundColor: '#fff',
},
'&$focused': {
backgroundColor: '#fff',
borderColor: '#DFDFDF',
},
'&$error': {
borderColor: theme.palette.error.main,
},
},
focused: {},
error: {},
}));
<Grid container>
<Grid xs={2} style={{ alignSelf: 'center', textAlign: 'center' }} item>
<img src="/img/usa_flag.svg" height="25" />
</Grid>
<Grid item xs={10}>
<TextField
fullWidth
label='Phone number'
variant='filled'
value={lastName}
style={{ border: '0' }}
InputProps={{ classes, disableUnderline: true }}
onChange={(e) => setLastName(e.target.value)}
/>
</Grid>
</Grid>
You can remove the variant and no border will be displayed:
<Grid container style={{border: "1px solid black"}}>
<Grid xs={2} style={{ alignSelf: 'center', textAlign: 'center' }} item>
<img src="/img/usa_flag.svg" height="25" />
</Grid>
<Grid item xs={10}>
<TextField
fullWidth
label='Phone number'
value={"lastName"}
style={{ border: '0' }}
InputProps={{ classes, disableUnderline: true }}
/>
</Grid>
</Grid>
Here is a sandbox.
In a React project I've details of wallet scrolling in a div named 'History'. Issue is that history details is scrolling without any issue, but, I want to hide inside 'History' div. How could it be done? Any appropriate solution?
Below is the code reference
const navScrollStyle = makeStyles((theme) => ({
root: {
marginTop: "120px",
display: "table",
overflowY: "auto",
maxWidth: "auto",
display: "flex",
justifyContent: "center"
}
}));
const navBodyStyle = makeStyles((theme) => ({
root: {
flexGrow: 1,
top: "0px",
position: "absolute",
width: "100%",
height: "100vh",
textAlign: "center",
background: "white",
zIndex: "9",
height: "100%",
overflowY: "auto"
},
menuButton: {
marginRight: theme.spacing(2),
color: "purple"
},
title: {
flexGrow: 1,
textAlign: "center",
color: "black"
}
}));
const gridClassStyle = makeStyles((theme) => ({
root: {
zIndex: "100",
flexGrow: 1,
position: "fixed",
top: "0px",
background: "white",
flexWrap: "nowrap",
boxShadow: "5px 10px 18px #888888"
},
paper: {
padding: theme.spacing(2),
textAlign: "center",
color: theme.palette.text.secondary
},
menuButton: {
marginRight: theme.spacing(2),
color: "purple"
},
title: {
flexGrow: 1,
textAlign: "center",
color: "black"
}
}));
const useStyles5 = makeStyles((theme) => ({
root: {
"& > *": {
margin: theme.spacing(1)
},
textAlign: "center",
width: "100%"
}
}));
const useStyles = makeStyles((theme) => ({
root: {
top: "20px",
width: "100%",
maxWidth: "auto"
},
nested: {
paddingLeft: theme.spacing(4)
}
}));
const TestPageScroll = () => {
const navBody = navBodyStyle();
const navScroll = navScrollStyle();
const gridClass = gridClassStyle();
const classes5 = useStyles5();
const classes = useStyles();
const NavPart = () => (
<Grid className={gridClass.root} container spacing={3}>
<Grid item xs={4} style={{ textAlign: "left" }}>
<IconButton
edge="start"
className={gridClass.menuButton}
color="inherit"
aria-label="menu"
>
<Link to="/">
<ArrowBackIcon />
</Link>
</IconButton>
</Grid>
<Grid
item
xs={4}
style={{ textAlign: "center", justifyContent: "center" }}
>
<Typography variant="h6" className={gridClass.title}>
<h2>Test Scroll</h2>
</Typography>
</Grid>
<Grid item xs={4} style={{ textAlign: "right", marginTop: "2%" }}>
<IconButton
aria-label="account of current user"
aria-controls="menu-appbar"
aria-haspopup="true"
>
<AccountCircle style={{ fontSize: "30px" }} />
</IconButton>
</Grid>
</Grid>
);
return (
<div className={navBody.root}>
{NavPart()}
<div className={navScroll.root}>
</div>
{/* Here the main code begins */}
<div style={{ height: "100px" }}>
<div
style={{
position: "fixed",
zIndex: "100",
background: "white",
width: "100%"
}}
>
<h2>History</h2>
</div>
<hr />
<List
component="nav"
aria-labelledby="nested-list-subheader"
className={classes.root}
>
<>
{/* Here purposely List are added to test overflow */}
<div style={{ overflowY: "auto", background: "red" }}>
<ListItem>
<h6>Wallet History1</h6>
</ListItem>
<Divider />
<ListItem>
<h6>Wallet History</h6>
</ListItem>
<Divider />
<ListItem>
<h6>Wallet History</h6>
</ListItem>
<Divider />
<ListItem>
<h6>Wallet History</h6>
</ListItem>
<Divider />
<ListItem>
<h6>Wallet History</h6>
</ListItem>
<Divider />
<ListItem>
<h6>Wallet History</h6>
</ListItem>
<Divider />
<ListItem>
<h6>Wallet History</h6>
</ListItem>
<Divider />
<ListItem>
<h6>Wallet History</h6>
</ListItem>
<Divider />
<ListItem>
<h6>Wallet History</h6>
</ListItem>
<Divider />
<ListItem>
<h6>Wallet History</h6>
</ListItem>
<Divider />
</div>
</>
</List>
</div>
</div>
);
};
As you can see below in the picture, Wallet history details is seen clearly which I want to hide inside 'History' div
Here is the codesandbox link for your reference: https://codesandbox.io/s/react-material-forked-71op5
Please click on 'WALLET' button when page loads
The problem is your History div is fixed and your Wallet History List div has no bounds on height which is getting scrolled behind the fixed divs above. one way to solve this problem is to limit your height of your Wallet History List div and make it fixed as well.
eg. add these style to your div for list
maxHeight : "800px", position :"fixed", width:"100%"