How to style adornment in MUI TextField? - javascript

I am trying to add just the default 14px padding-left set by startAdornment and want to make it so the adornment takes up half of the TextField instead. I can't seem to figure out how to style the startAdornment in general.
I tried style the div itself, this works but there is still an underlying 14px padding left. I tried styling the InputAdornment itself but it seems to have no effect.
InputProps={
this.state.didChange[rowIndex] ? {
startAdornment: (
<InputAdornment
position="start"
component="div"
style={{paddingLeft: '-14px'}}
disablePointerEvents>
<div style={{ backgroundColor: '#D3D4D0', marginLeft: '-14px', padding: "10px 13px", width: "26px", color: '#a1a39b' }}>
{prevVals[rowIndex]}
</div>
</InputAdornment>
)
} : null} />
This is the result of my current code:
This is what I want:
You can ignore the border color difference that doesn't matter I can change that.

there are adornedStart and adornedEnd classes in FilledInput and OutlinedInput classes.so you can either use them or use TextField
InputProps dependig on what variant you use.
<TextField
name={'text'}
variant="outlined"
InputProps={{
endAdornment:
<IconButton onClick={()=>0}>x</IconButton>,
classes: {
adornedEnd: classes.adornedEnd
}
}}
/>
here is CodeSandbox

You can change the background color of the InputAdornment by removing the padding left of the OutlinedInput and set a matching padding in your adornment (based on the padding of the input here);
import MuiTextField from '#mui/material/TextField';
import { styled } from '#mui/material/styles';
const TextField = styled(MuiTextField)(({ theme }) => ({
'& .MuiOutlinedInput-root': {
paddingLeft: 0,
},
'& .MuiInputAdornment-root': {
backgroundColor: theme.palette.divider,
padding: '28px 14px',
borderTopLeftRadius: theme.shape.borderRadius + 'px',
borderBottomLeftRadius: theme.shape.borderRadius + 'px',
},
}));
<TextField
placeholder="Password"
InputProps={{
startAdornment: (
<InputAdornment position="start">
<Visibility />
</InputAdornment>
),
}}
/>

Related

Material UI with React: How to style <Autocomplete/> with rounded corners

I've always been a fan of Google's search bar, with nice rounded corners and ample padding around the text.
I'm trying to replicate this style using Material UI's <Autocomplete/> component, but I can't seem to do it. I'm using Next.js. What I have so far is:
import React, { useState, useEffect } from 'react';
import TextField from '#mui/material/TextField';
import Stack from '#mui/material/Stack';
import Autocomplete from '#mui/material/Autocomplete';
import { borderRadius, Box } from '#mui/system';
import SearchIcon from '#material-ui/icons/Search';
const LiveSearch = (props) => {
const [jsonResults, setJsonResults] = useState([]);
useEffect(() => {
fetch(`https://jsonplaceholder.typicode.com/users`)
.then(res => res.json())
.then(json => setJsonResults(json));
}, []);
return (
<Stack sx={{ width: 400, margin: "auto"}}>
<Autocomplete
id="Hello"
getOptionLabel={(jsonResults) => jsonResults.name}
options={jsonResults}
noOptionsText="No results"
isOptionEqualToValue={(option, value) => {
option.name === value.name
}}
renderOption={(props, jsonResults) => (
<Box component="li" {...props} key={jsonResults.id}>
{jsonResults.name} - Ahhh
</Box>
)}
renderInput={(params) => <TextField {...params} label="Search users..." />}
/>
</Stack>
)
}
export default LiveSearch;
The above code should run as-is – there's an axios call in there to populate the autocomplete results too.
I've tried various way to get the <SearchIcon /> icon prefix inside the input with no success, but really I'd just be happy if I could figure out how to pad it. You can see in the google screenshot how the autocomplete lines up really well with the box, but in my version, the border-radius just rounds the element, and so it no longer lines up with the dropdown.
I'm new to Material UI, so I'm still not quite sure how to do these styles, but I think the issue is that the border is being drawn by some internal element, and although I can set the borderRadius on the component itself global CSS:
.MuiOutlinedInput-root {
border-radius: 30px;
}
I can't seem to set the padding or borders anywhere. I've also tried setting style with sx but it does nothing.
You have to look at the autocomplete css classes and override them in your component or use them in your theme, if you use one.
<Autocomplete
componentsProps={{
paper: {
sx: {
width: 350,
margin: "auto"
}
}
}}
id="Hello"
notched
getOptionLabel={(jsonResults) => jsonResults.name}
options={jsonResults}
noOptionsText="No results"
isOptionEqualToValue={(option, value) => {
option.name === value.name;
}}
renderOption={(props, jsonResults) => (
<Box component="li" {...props} key={jsonResults.id}>
{jsonResults.name} - Ahhh
</Box>
)}
renderInput={(params) => (
<TextField
{...params}
label="Search users..."
sx={{
"& .MuiOutlinedInput-root": {
borderRadius: "50px",
legend: {
marginLeft: "30px"
}
},
"& .MuiAutocomplete-inputRoot": {
paddingLeft: "20px !important",
borderRadius: "50px"
},
"& .MuiInputLabel-outlined": {
paddingLeft: "20px"
},
"& .MuiInputLabel-shrink": {
marginLeft: "20px",
paddingLeft: "10px",
paddingRight: 0,
background: "white"
}
}}
/>
)}
/>
Sandbox: https://codesandbox.io/s/infallible-field-qsstrs?file=/src/Search.js
I'm trying to figure out how to line up the edges (figured it out, see update), but this is how I was able to insert the Search icon, via renderInput and I got rid of the expand and collapse arrows at the end of the bar by setting freeSolo={true} (but this allows user input to not be bound to provided options).
import { Search } from '#mui/icons-material';
import { Autocomplete, AutocompleteRenderInputParams, InputAdornment } from '#mui/material';
...
<Autocomplete
freeSolo={true}
renderInput={(renderInputParams: AutocompleteRenderInputParams) => (
<div ref={renderInputParams.InputProps.ref}
style={{
alignItems: 'center',
width: '100%',
display: 'flex',
flexDirection: 'row'
}}>
<TextField style={{ flex: 1 }} InputProps={{
...renderInputParams.InputProps, startAdornment: (<InputAdornment position='start'> <Search /> </InputAdornment>),
}}
placeholder='Search'
inputProps={{
...renderInputParams.inputProps
}}
InputLabelProps={{ style: { display: 'none' } }}
/>
</div >
)}
...
/>
Ignore the colors and other styling, but this is what it looks like:
Update
I was able to line up the edges by controlling the border-radius via css and setting the bottom left and right to 0 and top ones to 20px.
Here's a demo:
Here are the changes I had to make in css. I also left the bottom border so there is a division between the search and the results, but you can style if however you like. (Also I'm using scss so I declared colors as variables at the top).
div.MuiAutocomplete-root div.MuiOutlinedInput-root { /* Search bar when not in focus */
border-radius: 40px;
background-color: $dark-color;
}
div.MuiAutocomplete-root div.MuiOutlinedInput-root.Mui-focused { /* Search bar when focused */
border-radius: 20px 20px 0px 0px !important;
}
div.MuiAutocomplete-root div.Mui-focused fieldset { /* fieldset element is what controls the border color. Leaving only the bottom border when dropdown is visible */
border-width: 1px !important;
border-color: transparent transparent $light-gray-color transparent !important;
}
.MuiAutocomplete-listbox { /* To control the background color of the listbox, which is the dropdown */
background-color: $dark-color;
}
div.MuiAutocomplete-popper div { /* To get rid of the rounding applied by Mui-paper on the dropdown */
border-top-right-radius: 0px;
border-top-left-radius: 0px;
}
You simply add border radius to fieldset:
<Autocomplete
sx={{ '& fieldset': { borderRadius: 33 }}}
/>
Codesandbox

Styling TextField in DesktopDatePicker Material UI

Self-taught dev here.
I am trying to style a textfield rendered by a DesktopDatePicker in a react application. I can change the width using MakeStyles, but can't seem to change the height of the box, or the font of the input text. My code is as follows:
const useStyles = makeStyles(() => ({
textField: {
width: "90%",
height: "75%",
marginLeft: "auto",
marginRight: "auto",
paddingBottom: 0,
marginTop: 0,
},
input: {
height: "70%",
fontSize: "small",
}
}));
const classes = useStyles();
return (
<div >
<LocalizationProvider dateAdapter={AdapterDateFns}>
<DesktopDatePicker
inputFormat="MM/dd/yyyy"
selected={new Date(initialVal)}
size="small"
onChange={(newDate) => {
setDateBirth(newDate);
setFieldValue("dateBirth", newDate);
}}
renderInput={(params) => <TextField
className={classes.textField}
sx={{ color: 'red', display: 'inline', fontSize: 8, height: "75%" }}
variant='outlined'
size="small"
InputProps={{
className: classes.input,
}}
{...params} />}
/>
</LocalizationProvider>
</div>
)
}
This renders the following:
MUI styling
The only thing I have been able to do to change the box size is the inline size="small" property. Thanks in advance.

I need to change material UI helper text background

you can see in the image below my background color is like gray am text field color is white when I show an error then that text field white color gets extended and the password error shows it's not looking good I need a set like text field white not get extend it error shown below in grey background
<TextField
className={classes.textField}
variant="outlined"
id="outlined-basic"
fullWidth
type={values.hidden ? "password" : "text"}
{...loginForm.getFieldProps("password")}
name="password"
error={loginForm.touched.password && loginForm.errors.password}
helperText={loginForm.touched.password && loginForm.errors.password}
placeholder="Password"
InputProps={{
endAdornment: (
<InputAdornment position="end">
<IconButton
className="icon"
aria-label="toggle password visibility"
onClick={handleClickShowPassword}
onMouseDown={handleMouseDownPassword}
edge="end"
>
{values.hidden ? <VisibilityOff /> : <Visibility />}
</IconButton>
</InputAdornment>
)
}}
/>;
CodeSandBox
You can change the TextField error color and other css properties here:
textfield: {
backgroundColor: "#fff",
"& .MuiFormHelperText-root.Mui-error": { //<--- here
backgroundColor: "red",
margin:0,
paddingLeft: 10
},
},
You may use the FormHelperTextProps props to set style or class to the helper text props
<TextField
....
FormHelperTextProps={{ style: { backgroundColor: 'transparent }}}
/>
Also, if setting className does not work for you (since it works on the parent div) you may want to learn how to use classes props or InputProps props of TextField
https://material-ui.com/api/text-field/
You over overide style of class MuiFormHelperText-root:
import React from "react";
import TextField from "#material-ui/core/TextField";
import { makeStyles } from "#material-ui/core/styles";
import { InputAdornment } from "#material-ui/core";
import PersonIcon from "#material-ui/icons/Person";
const useStyles = makeStyles((theme) => ({
root: {
"& .MuiTextField-root": {
margin: theme.spacing(1),
width: 200
},
"& .MuiFormHelperText-root": {
color: "#000 !important"
}
},
bg: {
backgroundColor: "#7986cb"
},
textfield: {
backgroundColor: "#fff"
}
}));
export default function ValidationTextFields() {
const classes = useStyles();
return (
<form className={classes.root} noValidate autoComplete="off">
<div className={classes.bg}>
<TextField
className={classes.textfield}
placeholder="Email"
variant="outlined"
fullWidth
name="username"
error
helperText={"error!"}
type="text"
id="outlined-basic"
InputProps={{
endAdornment: (
<InputAdornment position="end">
<PersonIcon />
</InputAdornment>
)
}}
/>
</div>
</form>
);
}
This can also achieved in css file
.MuiFormHelperText-root.Mui-error {
opacity: 1;
color: rgba(255, 109, 109, 1);
font-family: 'Open Sans';
font-size: 10px;
font-weight: 600;
font-style: italic;
letter-spacing: 0px;
text-align: left;
/* background-image: url('../../../assets/error.png');
background-repeat: no-repeat;
padding-left: 20px;
padding-top: 2px;*/
}
In jsx file,
<FormHelperText id="component-helper-text">
{validEmail ? ' ' : errorMessageEmail}
</FormHelperText>

Material UI InputProps endAdornment: Icon doesn't display inside input

having a small problem with displaying icon inside a custom input.
My code is:
<TutorialsCommentInput
placeholder="Write your opinion..."
style={{ padding: "20px" }}
fullWidth="true"
InputProps={{
endAdornment: (
<InputAdornment position="end">
<Icon />
</InputAdornment>
),
}}
/>
TutorialCommentInput:
export const TutorialsCommentInput = withStyles((theme) => ({
input: {
borderRadius: 0,
backgroundColor: '#262626',
fontSize: '15px',
fontWeight: 500,
padding: '2px 8px 2px',
height: '42px',
color: '#B6B6B6',
fontFamily: [
'Nunito',
'sans-serif'
]
}
}))(InputBase)
I've followed every step to do so, the Icon works completely fine outside the input, no clue what's wrong.

ReactJS: How to change placeholder font size of Material Ui Autocomplete?

I want to change the placeholder fontsize of Material Ui Autocomplet. Is there any way?
<Autocomplete
multiple
id="tags-outlined"
options={top100Films}
getOptionLabel={(option) => option.title}
defaultValue={[top100Films[13]]}
filterSelectedOptions
size="small"
renderInput={(params) => (
<TextField
{...params}
variant="outlined"
placeholder="Enter Transshipment Ports"
/>
)}
/>
In your example, you can target the input element of the component you render in renderInput which is TextField using makeStyles
const useStyles = makeStyles({
customTextField: {
"& input::placeholder": {
fontSize: "20px"
}
}
})
<TextField
classes={{ root: classes.customTextField }}
{...params}
variant="outlined"
placeholder="Enter Transshipment Ports"
/>
Example below using forked MUI demo
You can just add the ::placeholder css to the class/id of the input field, and change the font-size
Example:
#tags-outlined::placeholder {
font-size: 14px;
}
The sx property allows users to override the styling applied to the MuiFormLabel-root object, including the font size. This is useful for creating custom labels that better suit the user's design needs.
<TextField
{...props}
sx={{
'& .MuiFormLabel-root': {
fontSize: '0.8rem',
},
}}
/>

Categories