Remove border around material-ui v4 textbox - css

I am using Material-UI version 4 and not the latest mui v5.
I have tried the following to no avail. I just want to remove/hide the border around the textfield component.
<TextField
disabled={true}
variant="standard"
InputProps={{
style: { backgroundColor: '#d6eaf8', fontSize: '18px', color: 'black' },
underline: {
"&&&:before": {
borderBottom: "none"
},
"&&:after": {
borderBottom: "none"
}
}
}}
/>

If you only want to remove the material ui underline border you simply use the "disableUnderline: 'true'" property like this:
<TextField
disabled={true}
variant="standard"
InputProps={{
disableUnderline: 'true',
style: {
backgroundColor: "#d6eaf8",
fontSize: "18px",
color: "black"
}
}}
/>
If you want to have all the TextInputs look the same I would recommend setting up a custom Theme, though.
updated:
Another way of removing the border is to fiddle around with the CSS Global classes such as:
const StyledTextField = withStyles({
root: {
"& .MuiOutlinedInput-root": {
backgroundColor: "lightblue",
"& fieldset": {
border: "none"
}
}
}
})(TextField);
return <StyledTextField variant="outlined" />;
updated 2:
or if you rather use a custom theme:
const theme = createTheme({});
theme.overrides = {
MuiOutlinedInput: {
root: {
backgroundColor: 'lightblue',
},
notchedOutline: {
border: "none"
}
}
};
...
<ThemeProvider theme={theme}>
<TextField variant="outlined" />
</ThemeProvider>

Related

How to change the hover effect color on the options of material ui select component in react js?

I was trying to change the hover effect of mui Auto Complete component options [inside the drop down]. But it seems I can not find the proper method to do so.
This is the hover effect I am trying to change : Image
I want to put my own color choice.
This is my code [sorry I am new to react. pretty bad codes] .
I tried many solution from stack overflow and other websites. They did not work for me [may be because I did not understand what they were saying].
I just want to change the hover effect color, when the mouse hovers over the options inside the select componenet. But I can not figure out how to do it.
This is my component Image
export default function SelectBox ( { ...props } ) {
return (
<Autocomplete
autoComplete={ true }
disablePortal
id="combo-box-demo"
options={ props.options }
ChipProps={ { backgroundColor: "green" } } // I have no idea what this does
sx={ {
width: { xs: 100, sm: 130, md: 150, lg: 170 },
// no idea what this does too
"& + .MuiAutocomplete-popper .MuiAutocomplete-option[aria-selected='true']" :
{
backgroundColor: "#FF8787",
},
} }
renderInput={ ( params ) => <TextField { ...params } label={ props.label } size='small' className='color-change'
sx={ {
width: "80%", backgroundColor: "#F1F1F1",
'.MuiOutlinedInput-notchedOutline': {
borderColor: '#C6DECD',
}, borderRadius: 2,
"&:hover .MuiOutlinedInput-notchedOutline": {
borderColor: "green"
}, "&:hover": {
"&& fieldset": {
border: "1px solid green"
}
}
} } /> }
/>
);
}
Assuming that the goal is to customize the background color of options when being hovered, it seems that posted code just need to add :hover to a selector for the sx prop of Autocomplete.
Simplified example tested here: stackblitz
Change the following selector:
"& + .MuiAutocomplete-popper .MuiAutocomplete-option[aria-selected='true']": {
backgroundColor: "#FF8787",
};
To add :hover so that it selects the hovered:
// 👇 Select the hover item here
'& + .MuiAutocomplete-popper .MuiAutocomplete-option:hover': {
// 👇 Customize the hover bg color here
backgroundColor: "#FF8787",
};
Full example for Autocomplete, the original selector is kept in here so it customizes the selected item to match the hover effect, but this an optional approach.
export default function SelectBox(props) {
return (
<Autocomplete
autoComplete={true}
disablePortal
id="combo-box-demo"
options={props.options}
ChipProps={{ backgroundColor: "green" }}
sx={{
width: { xs: 100, sm: 130, md: 150, lg: 170 },
// 👇 Select the hover item here
"& + .MuiAutocomplete-popper .MuiAutocomplete-option:hover": {
// 👇 Customize the hover bg color here
backgroundColor: "hotpink",
},
// 👇 Optional: keep this one to customize the selected item when hovered
"& + .MuiAutocomplete-popper .MuiAutocomplete-option[aria-selected='true']:hover":
{
backgroundColor: "hotpink",
},
}}
renderInput={(params) => (
<TextField
{...params}
label={props.label}
size="small"
className="color-change"
sx={{
width: "80%",
backgroundColor: "#F1F1F1",
".MuiOutlinedInput-notchedOutline": {
borderColor: "#C6DECD",
},
borderRadius: 2,
"&:hover .MuiOutlinedInput-notchedOutline": {
borderColor: "green",
},
"&:hover": {
"&& fieldset": {
border: "1px solid green",
},
},
}}
/>
)}
/>
);
}

Styling the DatePicker from MUI

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!

Material UI Autocomplete margin sizing issue

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:

Change the color of MUI Autocomplete option

I'm using the Autocomplete of Material UI and I have a list with the attribute Color. I have to render option by option with the respective color in option background.
Here's a example:
import React from "react";
import TextField from "#material-ui/core/TextField";
import Autocomplete from "#material-ui/lab/Autocomplete";
export default function ComboBox() {
return (
<Autocomplete
id="combo-box-demo"
options={top100Films}
getOptionLabel={option => option.title}
style={{ width: 300 }}
renderInput={params => {
return (
<TextField
{...params}
label="Combo box"
variant="outlined"
fullWidth
/>
);
}}
/>
);
}
const top100Films = [
{ title: "The Shawshank Redemption", year: 1994, color: '#FF0000' },
{ title: "The Godfather", year: 1972, color: '#FF5555' },
{ title: "Avatar", year: 2010, color: '#FFFFFF' },
// Plus a bunch more
];
You can use renderOption to render the style conditionally for each option in the latest version of MUI.
<Autocomplete
renderOption={(props, option) => {
const { title, color } = option;
return (
<span {...props} style={{ backgroundColor: color }}>
{title}
</span>
);
}}
{...}
/>
Live Demo
You can change the CSS like this:
.MuiAutocomplete-inputRoot[class*="MuiOutlinedInput-root"] {
background: #ffff
}
This will to change the options color.
In the code, the sx prop I have included the css properties for the whole option menu, selected option and while hovered in the selected option for the Autocomplete component:
<Autocomplete
limitTags={1}
disablePortal
id="simple-search"
value={select.region}
onChange={handleChange("region")}
options={region}
sx={{
width: { sm: "100%", md: 340 },
"& + .MuiAutocomplete-popper .MuiAutocomplete-option": {
backgroundColor: "#363636",
},
"& + .MuiAutocomplete-popper .MuiAutocomplete-option[aria-selected='true']":
{
backgroundColor: "#4396e6",
},
"& + .MuiAutocomplete-popper .MuiAutocomplete-option[aria-selected ='true']
.Mui-focused":
{
backgroundColor: "#3878b4",
},
}}
disableCloseOnSelect
multiple
renderInput={(params) => (
<TextField {...params} label="Region" color="info" />
)}
/>

Change color of Select component's border and arrow icon Material UI

I'm trying to use a Material UI Select component on a dark background:
But I'm unable to change the color of the drop down icon and underline border to white. I've looked at overriding the styles using classes, and I'm able to change color with the following:
const styles = theme => {
root: {
borderBottom: '1px solid white',
},
icon: {
fill: 'white',
},
}
class MyComponent extends React.Component {
render() {
const {classes} = this.props;
return (
<Select
value={this.props.value}
inputProps={{
classes: {
root: classes.border,
icon: classes.icon,
},
}}
>
<MenuItem
value={this.props.value}
>
Foo
</MenuItem>
</Select>
)
}
}
However, I cannot seem to set the color of the underline while the Select component is in focus, i.e. with the above code, I get the white underline and icon, but while focus is on the component the underline stays black.
With some help from Jan-Philipp I got everything colored white, also while the component stays in focus:
const styles = theme => ({
select: {
'&:before': {
borderColor: color,
},
'&:after': {
borderColor: color,
}
},
icon: {
fill: color,
},
});
class MyComponent extends React.Component {
render() {
const {classes} = this.props;
return (
<Select
value="1"
className={{classes.select}}
inputProps={{
classes: {
icon: classes.icon,
},
}}
>
<MenuItem value="1"> Foo 1</MenuItem>
<MenuItem value="2"> Foo 2</MenuItem>
</Select>
)
}
}
Not a very pretty solution to getting the right contrast, but it does the job.
Edit
The above answer is missing some code, and is also missing the hover color, as suggested by #Sara Cheatham. See updated hooks based solution:
const useStyles = makeStyles({
select: {
'&:before': {
borderColor: 'white',
},
'&:after': {
borderColor: 'white',
},
'&:not(.Mui-disabled):hover::before': {
borderColor: 'white',
},
},
icon: {
fill: 'white',
},
root: {
color: 'white',
},
})
export const MyComponent = () => {
const classes = useStyles()
return (
<Select
className={classes.select}
inputProps={{
classes: {
icon: classes.icon,
root: classes.root,
},
}}
value='1'
>
<MenuItem value='1'> Foo 1</MenuItem>
<MenuItem value='2'> Foo 2</MenuItem>
</Select>
)
}
I don't know why setting the color of the border and icon got so complicated. In any case, the answer above didn't help me with setting the icon color. Eventually, I found the solution via this code:
text color: white
border: rgba(228, 219, 233, 0.25)
icon (arrow): white
<Select
// IconComponent={() => <ArrowDropDownIcon style={{marginRight:10,pointerEvents:'none'}}/>}
labelStyle={{ color: '#ff0000' }}
sx={{
color: "white",
'.MuiOutlinedInput-notchedOutline': {
borderColor: 'rgba(228, 219, 233, 0.25)',
},
'&.Mui-focused .MuiOutlinedInput-notchedOutline': {
borderColor: 'rgba(228, 219, 233, 0.25)',
},
'&:hover .MuiOutlinedInput-notchedOutline': {
borderColor: 'rgba(228, 219, 233, 0.25)',
},
'.MuiSvgIcon-root ': {
fill: "white !important",
}
}}
labelId="select-filter-by-field-labe;"
id="select-filter-by-field"
value={'some value'}
>
</Select>
You can change the bottom border color with the following code. Hope this helps you.
const styles = theme => ({
select: {
"&:before": {
borderColor: "red"
}
}
});
const MySelect = ({ classes }) => (
<Select value="1" className={classes.select}>
<MenuItem value="1">Option 1</MenuItem>
<MenuItem value="2">Option 2</MenuItem>
<MenuItem value="3">Option 3</MenuItem>
</Select>
);
Example in CodeSandbox
You can change the border color and SVG icon color of a MUI <Select> component using the following declaration:
<Select
sx={{
height: '2.5rem',
color: 'white',
'& .MuiOutlinedInput-notchedOutline': {
borderColor: 'white'
},
'& .MuiSvgIcon-root': {
color: 'white'
}
}}
>
You can access input (and the underline) like so:
<Select
autoWidth
classes={{
root: styles.root,
select: styles.select
}}
displayEmpty
input={
<Input
classes={{
underline: styles.underline
}}
/>
}
onChange={this.onChange}
value=""
>
select: {
'&:before': {
borderColor: 'var(--galaxy-blue)',
},
'&:hover:not(.Mui-disabled):before': {
borderColor: 'var(--galaxy-blue)',
}
},
<Select
className={classes.select}
value={selected}
onChange={this.handleChange}
>
This worked for me:
import {
FormControl,
InputLabel,
Select,
MenuItem,
OutlinedInput as MuiOutlinedInput,
} from "#material-ui/core";
const OutlinedInput = withStyles((theme) => ({
notchedOutline: {
borderColor: "white !important",
},
}))(MuiOutlinedInput);
const useStyles = makeStyles((theme) => ({
select: {
color: "white",
},
icon: { color: "white" },
label: { color: "white" },
}));
function Component() {
return (
<FormControl variant="outlined">
<InputLabel id="labelId" className={classes.label}>
Label
</InputLabel>
<Select
labelId="labelId"
classes={{
select: classes.select,
icon: classes.icon,
}}
input={<OutlinedInput label="Label" />}
>
<MenuItem>A</MenuItem>
<MenuItem>B</MenuItem>
</Select>
</FormControl>
);
}
This worked for me:
<Select
sx={{
"& .MuiSvgIcon-root": {
color: "white"
}
}}
>
I faced the same problem and I fixed it this:
I added the .css file into react file:
import './index.css';
<Select
labelId="demo-simple-select-standard-label"
id="demo-simple-select-standard"
value={selectedRegion}
onChange={handleChangeSelectOption}
label="region"
className="select-options-navbar-main-color"
>
{regionList.map((item)=>{
return <MenuItem key={item} value={item}>{item}</MenuItem>
})}
</Select>
and at the end the most important file .css file:
:root{
--select-options-navbar-main-color: white;
}
.select-options-navbar-main-color div{
color: var(--select-options-navbar-main-color) !important;
}
.select-options-navbar-main-color::before {
border-color: var(--select-options-navbar-main-color) !important;
}
.select-options-navbar-main-color::after {
border-color: var(--select-options-navbar-main-color) !important;
}
.select-options-navbar-main-color:not(.Mui-disabled):hover::before {
border-color: var(--select-options-navbar-main-color) !important;
}
.select-options-navbar-main-color svg{
fill: var(--select-options-navbar-main-color) !important;
}
There is a root class available in MUI documentation, we can easily override that, for arrow and border outline
<Select variant='outlined' sx={{'.MuiSelect-icon': {
color: 'white'
},
".MuiSelect-outlined":{
color: 'white'
}}}>

Resources