Question

我想将组件拆分为baseUI one并设置为一个：

例如。 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，有没有一种方法可以指定哪些道具转到哪个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的类。

如何使用情感js将多个classNames传递给内部子节点

1 个答案:

根据类名