antd 覆盖样式化组件
Posted
技术标签:
【中文标题】antd 覆盖样式化组件【英文标题】：antd overwriting styled components 【发布时间】：2020-10-16 11:41:34 【问题描述】：我有一个使用 antd 和样式化组件的 react 项目（不是从 CRA 引导的）。
编辑：
在路由“下”渲染的组件不会应用样式化组件的样式。
我最初以为我使用的 ui 框架 antd 会覆盖样式化组件样式，但我发现了一些有趣的东西；如果我将样式组件添加到标头组件，它可以正常工作，但如果我将样式组件添加到路由上呈现的任何组件，则不会应用样式。
我的主要 App 组件具有以下结构：
import React, Fragment from 'react';
import ConnectedRouter from 'connected-react-router';
import history from '../store/config';
...
const App = () =>
return (
<ConnectedRouter history=history>
<Fragment>
<Header />
<Routes />
</Fragment>
</ConnectedRouter>
);
;
为了完整起见，路由组件如下所示：
import React from 'react';
import Route, Switch, withRouter from 'react-router-dom';
import HomePage from '../components/pages/HomePage';
import EditorPage from '../components/pages/EditorPage';
export const Routes = () =>
return (
<Switch>
<Route exact path="/" component=withRouter(HomePage) />
<Route exact path="/editor" component=withRouter(EditorPage) />
</Switch>
);
;
export default Routes;
下面的示例是我添加到 HomePage 组件中的代码。
正在使用的包版本：
"antd": "^4.3.4",
"history": "^4.10.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-router-dom": "^5.1.2",
"redux": "^4.0.5",
"styled-components": "^5.1.1",
结束编辑。
由于某种原因，样式组件的样式被 antd 覆盖，除非我将样式内联。
例如，在下面的代码 sn-p 中，没有应用边框。一个超级基本的例子，但它的演示才是重点。
const HomePage = () =>
render(
<Container>
Hello
</Container>
);
;
const Container = styled.div`
border: 1px solid red;
`;
呈现如下：
在开发工具中查看样式甚至不显示。
但是如果我像这样添加样式内联：
<Container style= border: '1px solid red' >
轰隆隆！红色边框：
我错过了什么？？
当然非常感谢任何帮助或建议！
【问题讨论】：
您在<head> 中看到styled-components 样式表吗？此外，如果您的项目进行服务器端渲染，请确保您包含 styled-components 的 babel 插件。
没有服务器端渲染，但样式化的组件样式表作为头部的最后一个样式被加载
【参考方案1】：
我阅读了样式组件的文档，我认为这是问题所在。您应该在渲染之前使用样式。
const Button = styled.button`
background: transparent;
border-radius: 3px;
border: 2px solid palevioletred;
color: palevioletred;
margin: 0.5em 1em;
padding: 0.25em 1em;
$props => props.primary && css`
background: palevioletred;
color: white;
`
`;
const Container = styled.div`
text-align: center;
`
render(
<Container>
<Button>Normal Button</Button>
<Button primary>Primary Button</Button>
</Container>
);
看看上面出现在页面上的例子。
【讨论】：
【参考方案2】：你可以这样写：
const Container = styled.div`
&&
border: 1px solid red;
`
【讨论】：
以上是关于antd 覆盖样式化组件的主要内容，如果未能解决你的问题，请参考以下文章
styled-components不能覆盖antd组件样式?