antd 覆盖样式化组件答案

【问题标题】：antd overwriting styled componentsantd 覆盖样式化组件
【发布时间】：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 插件。
没有服务器端渲染，但样式化的组件样式表作为头部的最后一个样式被加载

标签： css reactjs antd styled-components

【解决方案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;
      }
    `

【讨论】：