无法将 styles 应用于 Reactjs 中的样式化组件元素

Question

I'm trying to wrap a component with a styled-component div and apply some styles. However, for some reason, the styles aren't being applied, even though the ostensibly correct wrapper that is expected to be rendered is being rendred.

CodeSandbox

What am I doing wrong here?

Answer 1

You just forgot to pass the className props, see here:

const Component = ({ className }) => (
  <div className={className}>Hello World!</div>
);

https://codesandbox.io/s/optimistic-lumiere-cq8gt?file=/src/App.js

I hope I helped you. Have a good day.

EDIT:Check the docs here

Answer 2

You need to container Component with styled.{tag} or styled(Component) And then use that Container component to wrap main component.

import React from "react";
import "./styles.css";
import styled from "styled-components";

export default () => <Component />;

const Component = () => <StyledDiv>Hello World!</StyledDiv>;

const StyledDiv = styled.div`
  font-size: 10rem;
  color: red;
  display: flex;
  justify-content: center;
  align-items: center;
`;

Check here: https://codesandbox.io/s/dank-hill-h8rbc?file=/src/App.js:128-189