Как сделать две разные компоненты Select с разными темами?

Question

[Nikolay Matyushkin]

Всем привет.

Проект на React. Для некоторых фич использую matherial ui. Так вот: объявил компоненту с Select-ом. Создал свою тему, описал стили, всё ок.

Вот эта компонента.

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.5px",
                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'
            }
        }
    }
});

class SelectDays 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;

Но мне теперь надо в другом месте заюзать примерно такой же Select, только немного с другими стилями. Я объявляю так же компоненту, описываю тему с другими стилями, но как оказалось эти две темы двух Select-ов пытаются друг друга переназначить.

Подскажите, как сделать две независимые компоненты со своими темами?

Вариант с объявлением одной темы и пробросом в неё каких-либо данных, которые будут идентифицировать тот или иной Select не предлагать. Оставлю на резерв)

Comments

[Петр Мухуров]

Для "немного других стилей" существует classname + css. Смысл темизации в том, чтобы сохранить какие-то глобальные стили на протяжении всего дерева. Поэтому, не работав с mui, вслепую предположу, что под капотом там сидит контекст, который вы успешно переписываете