Question

我有一个简单的App.js文件，该文件可以转到3页。登录名，主页和客户页面。 App.js呈现：

    render(){
        return(
            <Router>
                <Switch>
                    <Route path="/home">
                        <HomePage />
                    </Route>
                    <Route path="/customers">
                        <Customers />
                    </Route>
                    <Route path="/">
                        <Login />
                    </Route>
                </Switch>
            </Router>
        )
    }
}

App.js具有自己的App.css样式。在components文件夹中，我还有其他2个组件，并且确实为每个组件创建了单独的.css文件。我使用react-router-dom链接组件之间。我的hompage链接到客户页面的示例如下：{{1} 问题是只要样式子组件或父组件的链接组件（如果我的父组件（例如：App.js））页面样式匹配，它们就会更新（例如：我不能为每个页面提供不同的主体颜色）。我的webpack看起来像这样：

<Link to="/customers" style={{color: "white"}}>Customers</Link>

我觉得webpack会将我所有的.css文件捆绑到同一目录中，而下面出现的任何样式都将覆盖上面的样式。但是我无法提出解决方案。是Webpack配置问题还是代码问题，还是我必须正确构建文件系统？

如何防止父组件在反应中覆盖子组件的CSS样式？

0 个答案: