Я использую Material UI и ThemeProvider для переопределения некоторых стилей, однако перезаписанные стили влияют на компоненты, которые я не включил в теги ThemeProvider. Кроме того, мне пришлось использовать! Важный, чтобы переопределить некоторые стили, есть ли причина, по которой он все еще использует стиль по умолчанию поверх моего перезаписанного стиля, не используя! Важный?

Мой код ниже. Я просто хочу переписать стили для выпадающих компонентов, но на компонент CreateNewFolder это тоже влияет.

const theme = createMuiTheme({
    overrides: {
        MuiOutlinedInput: {
            input: {
                padding: "8px 14px !important"
            }
        },
        MuiInputLabel: {
            formControl: {
                transform: "none !important",
                top: "-6px !important",
                left: "45px !important",
                backgroundColor: "white",
                fontSize: "0.8rem",
                padding: "0 6px"
            }
        },
        MuiSelect: {
            select: {
                "&:focus": {
                    backgroundColor: "white"
                }
            }
        }
    }
});
return (
        <>
            <div
                style={{
                    display: "flex",
                    justifyContent: "space-between",
                    padding: "25px 95px 15px 75px",
                    height: "10vh"
                }}
            >
                <div>
                    <Button
                        variant="contained"
                        onClick={handleNewAdunit}
                        style={{ marginRight: "15px" }}
                    >
                        <AddIcon /> &nbsp; Adunit
                    </Button>
                    <Button onClick={handleFolder} variant="outlined">
                        <AddIcon /> &nbsp; Folder
                    </Button>
                </div>
                <div style={{ display: "flex", paddingLeft: "30px" }}>
                    <SearchBar
                        inputProps={{
                            value: "",
                            onChange: () => {},
                            style: {
                                width: "300px"
                            }
                        }}
                        results={[]}
                        displayKey={"component"}
                    />
                    <ThemeProvider theme={theme}>
                        <Dropdown
                            label="Sort By"
                            variant="outlined"
                            onChange={() => {}}
                            menuItems={[
                                {
                                    label: "Last modified",
                                    key: "last modified"
                                },
                                { label: "Option 2", key: "option 2" },
                                { label: "Option 3", key: "option 3" }
                            ]}
                            style={{
                                width: "150px",
                                marginLeft: "30px"
                            }}
                        />
                        <Dropdown
                            label="Show"
                            variant="outlined"
                            onChange={() => {}}
                            menuItems={[
                                { label: "My files", key: "my files" },
                                { label: "Option 2", key: "option 2" },
                                { label: "Option 3", key: "option 3" }
                            ]}
                            style={{
                                width: "150px",
                                marginLeft: "30px"
                                // height: "35px"
                            }}
                        />
                    </ThemeProvider>
                </div>
            </div>
            <div>
                <CreateNewFolder ref={folderRef} />
                <Snackbar
                    ref={adunitRef}
                    variant="info"
                    message="Stay tuned. New feature coming soon!"
                />
            </div>
        </>
1
Reid Campbell 29 Дек 2019 в 02:18

1 ответ

Я могу ошибаться, но тема кажется глобальной. Вы можете получить к нему доступ с помощью ловушки useTheme, что должно означать, что тема может быть доступна не только как пропущенная в дереве опора, таким образом, тема также находится на глобальном уровне. Опять же, это может быть неправильно

0
Adrian Pascu 29 Дек 2019 в 02:38