如何在React父组件中为子组件设置样式？错误方案求正确方法

首先得指出你代码里的几个明显问题：

1. 你的Child组件里定义了两个同名的Div变量，第二个会直接覆盖第一个，第一个styled.div等于白写了，这肯定是笔误，得先把变量名区分开；
2. 你想用styled(Child)来给子组件加样式，但Child是一个React类组件，styled-components默认只能直接包裹DOM元素或者已经是styled组件的对象，直接包裹普通React组件不会生效，而且你最后在Parent里渲染的还是原Child，不是包裹后的新组件，这也不对；
3. 还有个拼写错误：React类组件的正确写法是React.Component，不是React.Components（多了个s），这个错误会导致组件无法正常渲染。

下面给你两种可行的正确实现方式：

方式一：让Child接收className并传递给根元素 #

这是最通用的方案，让父组件可以通过传递className给Child，把外部样式注入到Child的根DOM元素上。

修正后的Child组件 #

import styled from 'styled-components';
import React from 'react';

// 修复变量名冲突问题
const WrapperDiv = styled.div`
  display: inline-block;
`;
const StyledButton = styled.button`
  display: block;
  background-color: red;
  margin-left: auto;
  margin-right: auto;
`;

export default class Child extends React.Component {
  render() {
    // 接收父组件传递的className，加到根元素上
    return <WrapperDiv className={this.props.className}>
      <StyledButton>Test</StyledButton>
    </WrapperDiv>;
  }
}

对应的Parent组件 #

import styled from 'styled-components';
import React from 'react';
import Child from './Child';

// 现在可以用styled包裹Child，因为Child会把className传递给内部根元素
const StyledChild = styled(Child)`
  margin-top: 10px;
`;

export default class Parent extends React.Component {
  render() {
    // 渲染包裹后的StyledChild，而不是原Child
    return <StyledChild />;
  }
}

方式二：通过props传递样式参数（更灵活的组件间样式控制） #

如果希望父组件能更细粒度地控制Child的样式，可以给Child定义可接收的props，让内部的styled组件根据props动态调整样式。

改进后的Child组件 #

import styled from 'styled-components';
import React from 'react';

// 给WrapperDiv添加props支持，接收marginTop参数
const WrapperDiv = styled.div`
  display: inline-block;
  margin-top: ${props => props.marginTop || '0'};
`;
const StyledButton = styled.button`
  display: block;
  background-color: red;
  margin-left: auto;
  margin-right: auto;
`;

export default class Child extends React.Component {
  render() {
    // 把父组件传递的marginTop props传给WrapperDiv
    return <WrapperDiv marginTop={this.props.marginTop}>
      <StyledButton>Test</StyledButton>
    </WrapperDiv>;
  }
}

对应的Parent组件 #

import React from 'react';
import Child from './Child';

export default class Parent extends React.Component {
  render() {
    // 直接通过props传递样式参数
    return <Child marginTop="10px" />;
  }
}

内容的提问来源于stack exchange，提问作者Willey3x37