score:4
Accepted answer
you should be specifying the variant
on the formcontrol
element instead of on the select
element. with putting it on the select
, the inputlabel
element is not getting the appropriate styling for the "filled" variant.
here's the beginning of the "filled" style for inputlabel:
/* styles applied to the root element if `variant="filled"`. */
filled: {
// chrome's autofill feature gives the input field a yellow background.
// since the input field is behind the label in the html tree,
// the input field is drawn last and hides the label with an opaque background color.
// zindex: 1 will raise the label above opaque background-colors of input.
zindex: 1,
note the comment indicating that the z-index is needed to raise the label above opaque background colors (as you are setting on the select).
here's a working example demonstrating the variant
on the formcontrol
:
import react from "react";
import { makestyles } from "@material-ui/core/styles";
import inputlabel from "@material-ui/core/inputlabel";
import menuitem from "@material-ui/core/menuitem";
import formcontrol from "@material-ui/core/formcontrol";
import select from "@material-ui/core/select";
const usestyles = makestyles((theme) => ({
formcontrol: {
margin: theme.spacing(1),
minwidth: 120
},
selectempty: {
margintop: theme.spacing(2)
}
}));
export default function simpleselect() {
const classes = usestyles();
const [age, setage] = react.usestate("");
const handlechange = (event) => {
setage(event.target.value);
};
return (
<div>
<formcontrol
variant="filled"
size="small"
classname={classes.formcontrol}
>
<inputlabel
style={{ color: "#000" }}
id="demo-simple-select-filled-label"
>
age
</inputlabel>
<select
style={{ backgroundcolor: "rgb(232, 241, 250)" }}
labelid="demo-simple-select-filled-label"
id="demo-simple-select-filled"
value={age}
onchange={handlechange}
>
<menuitem value="">
<em>none</em>
</menuitem>
<menuitem value={10}>ten</menuitem>
<menuitem value={20}>twenty</menuitem>
<menuitem value={30}>thirty</menuitem>
</select>
</formcontrol>
</div>
);
}
Source: stackoverflow.com
Related Query
- MaterialUI: Why does setting background color on Select component hides the InputLabel text and how could I avoid it happening?
- Why does not the background color get applied from props using state for a styled component div using react and typescript?
- Why does React render component for the second time after setting the state to the same value?
- Why parent component does not update input component when setting state?
- why does focus loose from the html input element when i return input component from custom React Hooks?
- MaterialUI KeyboardDateTimePicker: change background color without changing spacing inside the component
- In React ES6, why does the input field lose focus after typing a character?
- How to allow input type=file to select the same file in react component
- Why does React warn me against binding a component method to the object?
- Why does useState cause the component to render twice on each update?
- Why does calling useState's setter with the same value subsequently trigger a component update even if the old state equals the new state?
- How to change the text color and background color of ant-tooltip component
- Why closing a page does not unmount the component
- In React Is there a way to change the background color of a parent Label tag on a Radio Input checked?
- material-ui input select attribute hides the body overflow-y scroll - react js
- How to set the background color of material ui drawer component with styled-components?
- Why does setting the allowfullscreen attribute of an iframe doesn't seem to keep the attribute
- Why won't my controlled Input component in React update with the state?
- Why does this React component return the string '0'
- material-table How do I select a row changing the background color upon selection
- How to change the background color of a parent component from inside a child component in react, gatsby
- Why does the render function in react is called twice when using the component strategy?
- Why does my React component remain in the DOM after navigating to another page?
- How user string input will show as background color in a div in react JS functional component
- How to change the background color of MUI Menu Popover of TextField with select property?
- How to change the underline color of the input component in MD Bootstrap
- Why wont a MUI component be hidden by setting display to none in the sx prop?
- How to change the background color of the div while focusing the text Input field?
- Why does setting state in child component onclick cause recursive loop even when button not clicked?
- Why does the form not receive select data in AntD?
More Query from same tag
- How to make disabled date and time in react datepicker?
- Need some help on some reactjs logic
- How to solve no-underscore-dangle error without making the error off in config
- how to add date list inside dropdown in reactjs
- onClick doesn't fire event React.js
- how change state of several elements after click on button with React.js
- Want to modify props but i cant find them
- Issue with pausing audio in Howler and react
- Displaying error message from redux state
- react.js firebase return a response object in error state
- Typescript cryptic message when declaring function for one of my actions
- redux - reducer state is blank
- Is it possible to access redux store state in same render function as <Provider />
- Webpack v4 creating tiny chunks (by route)
- Are there any differences in how I am checking props?
- Added key prop || Warning: Each child in a list should have a unique "key" prop
- React App development behind Nginx
- Type not assignable on Component
- Make Route for multiple variables using React Router
- react - tick logic for material-ui radio button
- How to change a SASS variable value using React Js?
- Having git problem in React django project
- React-router 2.0: passing username from login to children
- Making an API call through external file and returning results React
- When the input is blank the last chip should be deleted on pressing Backspace
- Setting the default value of an input field after data is retrieved causes the content to overlap and the "onChange" event not to be triggered
- Margin property not being passed as props
- What's the correct pattern to change parent state inside a child state in React?
- cache.addAll cannot cache file exept .html
- react-redux - props from mapDispatchToProps undefined with PropTypes