How to make two different components to Select from different themes?

Hi all.

Project React. For some features I use matherial ui. So: a component declared with Select-Ohm. Created a topic, describe the styles, everything is OK.

Here this component.
import React {Component} from "react";
import {createMuiTheme, createStyles, MuiThemeProvider} from "@material-ui/core/styles";
import {_} from "underscore";
import MenuItem from "@material-ui/core/MenuItem";
import styled from "styled-components";
import Select from '@material-ui/core/Select';

const selectDays = createMuiTheme({
 overrides: {
 MuiInput: createStyles({
 underline: {
 '&&:after': {
 display: "none"
},
 '&&:before': {
 display: "none"
}
}
}),
 MuiSelect: createStyles({
 select: {
 borderRadius: '66px',
 padding: '3px 40px 3px 35px',
 height: '34px !important'
 fontSize: '16px',
 color: '#000',

 '&&:focus': {
 backgroundColor: '#E0D5D2',
 borderRadius: '66px'
},
},
 icon: {
 color: '#fff',
 right: '20px',
 fontSize: '30px',
 top: 'calc(50% - 15px)'
},
}),
 MuiInputBase: createStyles({
 inputSelect: {
 backgroundColor: '#E0D5D2',
 color: '#fff',
 minWidth: '200px !important'
 maxWidth: '300px',
 height: '44px !important'
 display: 'flex',
 alignItems: 'center',
 justifyContent: 'center',
 fontFamily: '"Lato", sans-serif',
 fontStyle: 'normal',
 fontWeight: 'normal',
 fontSize: '20px',
 lineHeight: '24px',
}
}),
 MuiMenuItem: createStyles({
 root: {
 background: '#E0D5D2',
 color: '#000',
 paddingBottom: '12px',
 paddingTop: '12px',
 paddingLeft: '10px',
 paddingRight: '10px',
 transition: '.2s linear',

 '&&:hover': {
 backgroundColor: '#fff',
},

 '&&:hover .okay-order-menu': {
 borderColor: '#000',
},

 '&&: selected': {
 backgroundColor: '#26A152',
 color: 'red',
},
},
 gutters: {
 paddingLeft: '45px'
}
}),
 MuiPaper: createStyles({
 rounded: {
 borderRadius: '22px'
}
}),
 MuiPopover: createStyles({
 paper: {
 left: "431.5 px",
 width: "319px",
}
}),
 MuiList: createStyles({
 padding: {
 paddingTop: '0',
 paddingBottom: '0'
}
}),
 MuiListItem: createStyles({
 root: {
 '&$selected': {
 backgroundColor: '#fff !important'
}
}
}),

 // How do I enforce this ONLY inside of MuiMenuItem and only for
 // the selected variant of that?
 MuiTypography: {
 subheading: {
 color: 'white'
}
}
}
});

SelectDays class extends Component{

render(){
 const {
activeDay,
days
 } = this.props;

return(
 <DaySelect id="daySelect">
 <MuiThemeProvider theme={selectDays}>
<Select
value={activeDay}
onChange={this.props.changeDaySelect}
autoWidth={true}
>
{
 _.map(days, (day, key) => {
 return <MenuItem value={day[0]} key={key}>
 <OkayOrderMainDay className="okay-order-menu">
 <FontAweOkay className="fas fa-check" />
</OkayOrderMainDay>
{day[1]}
 </MenuItem >
})
}
</Select>
</MuiThemeProvider>
</DaySelect>
)
}
}

export default SelectDays;

But now I have another place to use about the same Select statement, only a bit with other styles. I declare the same component, describe the topic with other styles, but as it turned out, those two topics are two Select-ov are trying each other to reassign.

Tell me how to make two independent components, with their subjects?

The option of declaring one topic and forwarding any data that will identify a particular Select not to offer. Leave it on reserve)
April 3rd 20 at 18:27
0 answer

Find more questions by tags React