antd overwriting styled components

Question

I have a react project (which was not bootstrapped from CRA) which uses antd and styled components.

EDIT:

---

Components rendered 'under' a route do not apply styles from styled components.

I initially thought that antd, the ui framework I am using was overwriting the styled components styles but I discovered something interesting; If I add a styled component to the header component it works just fine but if I add a styled component to any component rendered on a route, the styles are not applied.

My main App component has the following structure:

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

For completeness, the routes component looks like this:

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;

The example below is code I've added to the HomePage component.

package versions in use:

"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",

END EDIT.

---

For some reason the styles from styled components are overwritten by antd unless I place the styles inline.

For example, in the following code snippet the border does not get applied. A super basic example but it demo's the point.

const HomePage = () => {

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

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

It renders like this:

Looking in dev tools the style doesn't even show up.

But if I add the style inline like this:

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

Boom: red border:

What am I missing??

Of course any help or suggestions is greatly appreciated!

Answer 1

I read the docs of styled-components and I think this is the problem.You should use style before render.

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

Look at the above example that appears on the page.

Answer 2

You can write styled like:

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