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{

 const {
 } = this.props;

 <DaySelect id="daySelect">
 <MuiThemeProvider theme={selectDays}>
{, (day, key) => {
 return <MenuItem value={day[0]} key={key}>
 <OkayOrderMainDay className="okay-order-menu">
 <FontAweOkay className="fas fa-check" />
 </MenuItem >

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