如何使用情感js将多个类名传递给内部children

Question

我想将组件拆分为一个 baseUI 和一个样式：

例如。 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>
    )
  }
}

样式化MyComponent.jsx

import styled from 'react-emotion'

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

export default StyledMyComponent

无论我在样式化函数的参数中添加什么，它们都只会转到 className，有没有办法指定哪些 props 转到哪个 className？

我还可以用 children 选择器做类似 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>
    )
  }
}

根据 class 名称有条件地设置元素及其 children 的样式

您可以根据 classes.main component 下的内容有条件地更改样式。

以你为例：

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

您可以像这样设置 children 的样式：

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

注意 & 字符。它本质上意味着 "this class"。所以 & .childClassName 表示“此元素的 childrens 具有 class childClassName.

您也可以使用 &.someClassName（注意缺少 space），这意味着：“此元素还具有名为 someClassName 的 class。

如何使用情感js将多个类名传递给内部children

how to pass multiple classNames to inner children with emotion js

emotion

reactjs

根据 class 名称有条件地设置元素及其 children 的样式