schuelerlabor-cleverlab/smarti
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

remove background on focus

Browse Source
This commit is contained in:
fbruc03 2022-11-25 11:53:04 +01:00
parent 3959de86f4
commit 42a8d3db4f
1 changed files with 52 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
src/components/NavbarSettings.js
View File

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