We Keep Coding

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

I Want to retain the placeholder on left side while typing any kind of text in TextInput Field in React Native

Here is my code...please check the code and guide me....what i have to do for that
<Input
containerStyle={tailwind('mt-4')}
label="Item Price"
labelStyle={{fontWeight: '800'}}
theme="secondary"
keyboardType={'numeric'}
type="underline"
placeholder="$"
clear={true}
onBlur={onBlur}
value={price}
onChangeText={text => setPrice(text)}
errorMessage={
!/\d+((,\d+)+)?(.\d+)?(.\d+)?(,\d+)?/.test(price) && price
? 'Invalid Price'
: null
}
/>
)}
name={'price'}

You can do something like
import React, { useState } from "react";
import { Text, TextInput, View } from "react-native";
const App = () => {
const [text, setText] = useState("");
return (
<View style={{ flexDirection: "row", borderWidth: 1, borderColor: "red" }}>
{text.length > 0 && <Text style={{ color: "grey" }}>$</Text>}
<TextInput
style={{ color: "grey" }}
placeholder="Type here to translate!"
onChangeText={(newText) => setText(newText)}
defaultValue={text}
/>
</View>
);
};
export default App;

If you want the text to be in the input all the time you either have to put it in the value and force it to be there. OR you have to use another element and position it over the input.
.ds {
position: absolute;
margin-left: .6em;
font-size: .8em;
line-height: 1.5em;
}
.ds + input {
padding-left: 1em;
}
<label for="x" class="ds">$</label><input type="text" id="x">

How to remove border of Material UI's DatePicker?

Here is the datepicker component
import React, { Fragment, useState } from "react";
import {
KeyboardDatePicker,
MuiPickersUtilsProvider
} from "#material-ui/pickers";
import DateFnsUtils from "#date-io/date-fns";
import makeStyles from "#material-ui/styles/makeStyles";
const useStyles = makeStyles({
root: {
"& .MuiInputBase-root": {
padding: 0,
"& .MuiButtonBase-root": {
padding: 0,
paddingLeft: 10
},
"& .MuiInputBase-input": {
padding: 15,
paddingLeft: 0
}
}
}
});
function InlineDatePickerDemo(props) {
const [selectedDate, handleDateChange] = useState(new Date());
const classes = useStyles();
return (
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<KeyboardDatePicker
className={classes.root}
autoOk
variant="inline"
inputVariant="outlined"
label="With keyboard"
format="MM/dd/yyyy"
value={selectedDate}
InputAdornmentProps={{ position: "start" }}
onChange={(date) => handleDateChange(date)}
/>
</MuiPickersUtilsProvider>
);
}
export default InlineDatePickerDemo;
From codeSandbox Link can anyone tell how to remove border from all sides ?
Although I managed to know that .MuiInput-underline:before style class is responsible for border width but dont know where to put that class in makeStyles.

You just need to edit a bit the KeyboardDatePicker element:
Remove inputVariant="outlined"
Add
InputProps={{
disableUnderline: true
}}
CodeSandbox

in MUI you can add variant="standard" to TextField :
renderInput={(params) => <TextField variant="standard" {...params} />}
completely :
<DesktopDatePicker
inputFormat="MM/dd/yyyy"
className="mt-0 w-100"
required={required}
margin="normal"
id="date-picker-dialog"
label={label}
format="dd/MM/yyyy"
value={value}
onChange={handleDateChange}
renderInput={(params) => <TextField variant="standard" {...params} />}
/>

It's just necessary to remove inputVariant="outlined" props. So your code becomes:
<KeyboardDatePicker
className={classes.root}
autoOk
variant="inline"
label="With keyboard"
format="MM/dd/yyyy"
value={selectedDate}
InputAdornmentProps={{ position: "start" }}
onChange={(date) => handleDateChange(date)}
/>
Here your code modified.

const useStyles = makeStyles({
root: {
"& .MuiInputBase-root": {
padding: 0,
"& .MuiButtonBase-root": {
padding: 0,
paddingLeft: 10,
},
"& .MuiInputBase-input": {
padding: 15,
paddingLeft: 0
},
"& .MuiOutlinedInput-notchedOutline": {
border: 'none'
}
}
}
});

How to style adornment in MUI TextField?

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>
),
}}
/>

Change color InputLabel Material UI

I have the following input label:
<InputLabel>NAME</InputLabel>
My problem is that the text is in White (I don't get why is white, maybe I am doing something wrong), and I can't see white on white. How do I change the color to black?

You can give the <InputLabel /> a className:
<InputLabel classname="test-label">This is a label</InputLabel>
In your stylesheet:
.test-label: {
color: #000000 !important;
}
If you are trying to style the <InputLabel /> through a <TextField /> component
You can give the <InputLabel /> a class by accessing the <TextField /> InputLabelProps:
<TextField
label="This is a label"
InputLabelProps={{
className: "test-label"
}}
/>
In your stylesheet:
.test-label: {
color: #000000 !important;
}

This worked for me
<TextField
label="This is a label"
InputLabelProps={{
className: classes.formLabel
}}
/>
formLabel: {
color: '#000,
'&.Mui-focused': {
color: '#000
}
}

Use withStyles and classes property. Have a look at overriding with classes section and the implementation of the component for more detail.
Read the API of InputLabel here.
Create a required styles
const styles = theme => ({
cssLabel: {
color:'blue',//required color
},
)}
Apply the styles using FormLabelClasses property.
<InputLabel
FormLabelClasses={{
root: classes.cssLabel,
focused: classes.cssFocused,
}}
htmlFor="custom-css-input"
>
Custom CSS
</InputLabel>
Don't forget to import withStyles.
Refer Customised input in documentation itself.

What’s up? After looking for the answer it was as simple as
<Box>
<TextField
onChange={handleChange("quantity")}
label="$ Quantity"
variant="filled"
InputLabelProps={{
style: { color: "cadetblue" }
}}
/>
</Box>

react.js?
try use
const divStyle = {
color: 'blue',
};
<InputLabel style={divStyle} >NAME</InputLabel>

You can give the style for the below tag as follows;
<InputLabel style="color:black;">NAME</InputLabel>
or
Add the following for InputLabel in CSS and try:
InputLabel{
color: black;
}

The color of the input label doesn't necessarily remain when it's in focus, and will be overridden by the defaults. The way that I solved this and to get the font colour to remain the same was by doing the following in typescript:
const styles = (theme: Theme) => createStyles({
formText: {
color: theme.palette.secondary.contrastText,
'&$formLabelFocused': {color: theme.palette.secondary.contrastText}
},
formLabelFocused: {
}
})
class Example extends React.Component<>{
public render() {
<FormControl>
<InputLabel
FormLabelClasses={{
root: classes.formText,
focused: classes.formLabelFocused
}}
>
Currency
</InputLabel>
</FormControl>
<Select>
<MenuItem key={1}>Example</MenuItem>
</Select>
}
}
I struggled with many variations on this before getting the right workaround

Please try this:
const divStyle = {
color: 'blue',
};
<InputLabel style={divStyle} >NAME</InputLabel>