antd覆盖样式化的组件

Question

我有一个React项目（不是从CRA启动的），它使用antd和样式化的组件。

编辑：

---

“在”路径下渲染的组件不会应用样式化组件中的样式。

最初，我以为antd（我正在使用的ui框架）会覆盖样式化的组件样式，但是我发现了一些有趣的东西。如果将样式化的组件添加到标头组件中，则效果很好，但是如果将样式化的组件添加到路线上呈现的任何组件中，则不会应用样式。

我的主要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>
  );
};

为完整起见，routes组件如下所示：

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' }}>

轰！红色边框：

我想念什么？

当然，任何帮助或建议都将不胜感激！

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

看看上面显示在页面上的示例。