Question

我认为我可能会以完全错误的方式进行此操作，因此任何更好地做到这一点的建议都将是很棒的！

我有一个情态成分。当它可见时，我希望GlobalStyle用html { overflow: hidden }来阻止页面滚动。

这是我的代码： 我已删除了尽可能多的无用代码

Modal.jsx：

export const GlobalStyle = createGlobalStyle`
  html {

    overflow: ${props => {
        const { visible } = props;

        console.log(props); // This logs my theme props?

        if (visible === true) {
            return "hidden";
        }
        return "auto";
    }}
}
`;

function Component({ ...props }) {
    const {
        visible
    } = props;

    return ( <Modal visible={visible} /> );
}

App.jsx GlobalStyle是从Modal导入的

import { ThemeProvider } from "styled-components";
import { GlobalStyle } from "../presentation/modal/modal";
import Controller from "./controller";

const theme = {
    //theme stuff
};

const App = props => {
    return (
        <ThemeProvider theme={theme}>
            <React.Fragment>
                <GlobalStyle />
                <Controller {...props} />
            </React.Fragment>
        </ThemeProvider>
    );
};

export default App;

因此，我是否需要GlobalStyle才能知道visible的正确时间或正确时间，还是需要更好的方法来实现？任何帮助将非常感激。谢谢。

值得一提的是，我确实有一个可以处理状态的redux存储吗？可以将其用于其他地方吗？有可能将GlobalStyle移出我的组件吗？

内部Modal.jsx

const mapStateToProps = state => ({
    visible: state.modalReducer.visible
});

传递用于样式组件GlobalStyle的组件道具

0 个答案: