reactjs - 如何使用情感js将多个类名传递给内部子级

Question

我想将组件拆分为 baseUI 组件和 styled 组件:

例如。 MyComponent.jsx

export default class MyComponent extends React.Component {
  ...
  ...
  render() {
    const { wrapperClassName, className, childClassName } = this.props;
    return (
      <div className={wrapperClassName>
        <div className={className />
        <div className={childClassName} />
      </div>
    )
  }
}

StyledMyComponent.jsx

import styled from 'react-emotion'

const StyledMyComponent = styled(MyComponent)(
  ...
  ...
)

export default StyledMyComponent

但是，我放入样式函数参数的任何内容都只会转到 className，有没有办法指定哪些 props 转到哪个 className？

我还可以使用子选择器做一些类似 sass/less 的事情吗？ 假设是这样的:

const classes = css`
  color: red;
  span { // this works
    color: black;
  }
  .childClassName { // this doesn't work
    color: green;
  }

`
<MyComponent className={classes} />

Answer 1

不，你不能。

您可以做的是为底层 div 创建特定的组件。这就是我制作组件的方式:

const MyComponentStyle = styled('div')....;
const MySecondComponentStyle = styled('div')...;
const MyThirdStyle = styled('div')...;

const MyComponent = ({ wrapperClassName, childClassName, className }) =>
      <MyComponentStyle className={wrapperClassName}>
        <MySecondComponentStyle className={className} />
        <MyThirdStyle className={childClassName} />
      </MyComponentStyle>
    )
  }
}

根据类名有条件地设置元素及其子元素的样式

您可以根据其类有条件地更改主组件下面内容的样式。

以你的例子:

const Something = () => (
  <MyComponent className={classes}>
    <div className="childClassName">child</div>
    <div className="otherChildClassName">child</div>
  </MyComponent>

您可以像这样设置子元素的样式:

const classes = css`
  color: red;
  span {
    color: black;
  }
  & .childClassName {
    color: green;
  }
`

注意 & 字符。它本质上意味着“这个类”。因此 & .childClassName 表示“此元素的子元素，具有类 childClassName”。

您还可以使用 &.someClassName (注意缺少空格)，这意味着:“此元素还具有名为 someClassName 的类。