remove background on focus

This commit is contained in:
fbruc03 2022-11-25 11:53:04 +01:00
parent 3959de86f4
commit 42a8d3db4f

View File

@ -5,6 +5,19 @@ import MenuItem from '@material-ui/core/MenuItem';
import Select from '@material-ui/core/Select';
import { setBoard } from '../actions/boardAction';
import ReactCountryFlag from "react-country-flag";
import { MuiThemeProvider, createTheme } from '@material-ui/core/styles';
const theme = createTheme({
overrides: {
MuiSelect: {
select: {
'&:focus': {
backgroundColor: 'transparent',
},
},
},
},
});
class NavbarSettings extends Component {
componentDidMount() {
@ -17,43 +30,51 @@ class NavbarSettings extends Component {
this.props.setLanguage(event.target.value);
}
render() {
console.log(this.props.classes);
return (
<div style={{ margin: "0 0 0 auto", display: "flex" }}>
<div style={{ margin: "0 30px 0 auto", display: "flex" }}>
<Select
value={this.props.selectedBoard}
onChange={(e) => this.props.setBoard(e.target.value)}
disableUnderline={true}
>
<MenuItem value="mcu">senseBox MCU</MenuItem>
<MenuItem value="mini">senseBox MCU mini</MenuItem>
</Select>
<MuiThemeProvider theme={theme}>
<Select
value={this.props.selectedBoard}
onChange={(e) => this.props.setBoard(e.target.value)}
disableUnderline={true}
style={{ backgroundColor: "transparent !important" }}
>
<MenuItem value="mcu">senseBox MCU</MenuItem>
<MenuItem value="mini">senseBox MCU mini</MenuItem>
</Select>
</MuiThemeProvider>
</div>
<div style={{ margin: "0 0 0 auto", display: "flex" }}>
<Select
value={this.props.language}
onChange={this.handleChange}
disableUnderline={true}
IconComponent={() => null}
>
<MenuItem value={'en_US'} >
<ReactCountryFlag
countryCode="US"
svg
cdnSuffix="svg"
title="US"
/>
</MenuItem>
<MenuItem value={'de_DE'}>
<ReactCountryFlag
countryCode="DE"
svg
cdnSuffix="svg"
title="DE"
/>
</MenuItem>
</Select>
<MuiThemeProvider theme={theme}>
<Select
value={this.props.language}
onChange={this.handleChange}
disableUnderline={true}
IconComponent={() => null}
>
<MenuItem value={'en_US'} >
<ReactCountryFlag
countryCode="US"
svg
cdnSuffix="svg"
title="US"
/>
</MenuItem>
<MenuItem value={'de_DE'}>
<ReactCountryFlag
countryCode="DE"
svg
cdnSuffix="svg"
title="DE"
/>
</MenuItem>
</Select>
</MuiThemeProvider>
</div>
</div >
);