как передать несколько classNames внутренним детям с эмоциями JS - PullRequest
Новая
       10

как передать несколько classNames внутренним детям с эмоциями JS

0 голосов
/ 13 июня 2018

Я хочу разделить компоненты на 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>
    )
  }
}

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} />

1 Ответ

0 голосов
/ 13 июня 2018

Нет, вы не можете.

Что вы можете сделать, это создать конкретные компоненты для базового элемента 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.

...