Question

我想将此媒体查询应用于child元素，但是由于child元素不能在其他组件中使用，因此不能对其进行修改，因此，我想将这些样式“继承”到Child元素，但是它不能像这个

你知道为什么吗？

export const StyledFather = styled(Father)`
  width: 100%;
  min-width: 600px;
  @media only screen and (max-width: 600px) {
    .customer_column{
      display: none;
    }
    .orderNumber_column{
      display: none;
    }
  }
  @media only screen and (max-width: 768px) {
    .tag_column{
      display: none;
    }
  }
`;

const Father = () => (
  <UnstyledFather >
    <Child />
  </UnstyledFather>
);


class Child extends PureComponent {
  render() {
    return (
      <UnstyledChild />
    )
  }
}

Answer 1

我认为我能够解决问题。需要通过道具将clasName属性传递给子元素：

const Father = () => (
  <UnstyledFather >
    <Child className/> //pass the className attr
  </UnstyledFather>
);

class Child extends PureComponent {
  const { className } = this.props //received via props
  render() {
    return (
      <UnstyledChild />
    )
  }
}

Child.propTypes = {
  className: PropTypes.string,
};

就是这样！

React Styled-components没有将样式应用于子元素

1 个答案: