1

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

例如。我的组件.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，有没有办法指定哪些道具转到哪个 className？

我也可以用儿童选择器做一些类似 sass/less 的事情吗？假设是这样的：

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

`
<MyComponent className={classes} />
4

1 回答 1

2

不，你不能。

您可以做的是为底层 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意思是“这个元素的子元素与 class childClassName。

您也可以使用&.someClassName（注意缺少空间），这意味着：“这个元素还有一个名为someClassName.

于 2018-06-13T15:53:49.883 回答