css - antd 覆盖样式化组件

Question

我有一个使用 antd 和样式化组件的反应项目（不是从 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 覆盖，除非我将样式内联。

例如，在以下代码片段中，没有应用边框。一个超级基本的例子，但它演示是重点。

const HomePage = () => {

  render(
    <Container>
      Hello
    </Container>
  );
};

const Container = styled.div`
  border: 1px solid red;
`;

它呈现如下：

在开发工具中查看样式甚至没有出现。

但是如果我像这样添加样式内联：

<Container style={{ border: '1px solid red' }}>

繁荣！红色边框：

我错过了什么？？

当然，非常感谢任何帮助或建议！

标签： cssreactjsantdstyled-components

Answer 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>
);

查看页面上显示的上述示例。