Question

我正在使用Material UI和ThemeProvider覆盖某些样式，但是，覆盖的样式影响了我没有包装在ThemeProvider标记中的组件。另外，我不得不使用！important来覆盖某些样式，是否有理由仍然在不使用！important的情况下仍对我的覆盖样式使用默认样式？

我的代码如下。我只想覆盖下拉菜单组件的样式，但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>
        </>

Answer 1

我可能是错的，但主题似乎是全球性的。您可以使用useTheme钩子来访问它，这意味着不仅可以将主题作为在树中传递的道具来访问，而且主题也可以在全局级别上访问。再次，这可能是错误的

ThemeProvider影响未包装的组件

1 个答案: