Стиль реагируй-выбирай с Афродитой - PullRequest
Новая
       34

Стиль реагируй-выбирай с Афродитой

0 голосов
/ 12 февраля 2019

Я пытаюсь использовать некоторые существующие стили, встроенные в Афродиту, для стилизации стороннего компонента реагировать на выбор.Компонент имеет некоторые подпорки, которые позволяют передавать className, которое определяет класс для использования в основном контейнере компонента.Затем у него есть свойство classNamePrefix, которое используется для префикса дочерних элементов в компоненте.В документации подробно описано, какую комбинацию classNamePrefix + name использовать в таблице стилей для стилизации каждого элемента.

https://react -select.com / styles # using-classnames

Я ищу пример того, как я бы сделал это, используя афродиту.У меня проблема в том, что когда я вызываю css (), я получаю случайное имя класса.Я не могу найти способ указать classNamePrefix.

1 Ответ

0 голосов
/ 13 февраля 2019

В итоге я использовал React Select Component API. Вот пример того, как я использовал Aphrodite для внедрения пользовательских стилей в отдельные разделы компонента React Select. 

// Node Modules
import { css } from 'aphrodite';
import PropTypes from 'prop-types';
import React, { Fragment } from 'react';
import ReactSelect, { components } from 'react-select';
// Styles
import styles from './SelectStyles';
import { fontStyles } from 'styles';
// Assets
import caretImg from 'images/downCaret.svg';

class Select extends React.Component {
  render() {
    const { noOptionsMessage, onChange, options, value } = this.props;

    const Control = props => (
      <components.Control {...props} className={css(styles.selectControl)} />
    );

    const DropdownIndicator = props => {
      return (
        components.DropdownIndicator && (
          <components.DropdownIndicator {...props}>
            <img src={caretImg} height="6px" alt="▼" className={css(styles.caret)} />
          </components.DropdownIndicator>
        )
      );
    };

    const IndicatorSeparator = ({ innerProps }) => {
      return <span className={css(styles.indicatorSeparator)} {...innerProps} />;
    };

    const Menu = props => {
      return (
        <Fragment>
          <components.Menu {...props} className={css(styles.menu)}>
            {props.children}
          </components.Menu>
        </Fragment>
      );
    };

    const Option = props => (
      <components.Option
        {...props}
        className={css(
          fontStyles.regular,
          props.isSelected ? styles.menuOptionSelected : styles.menuOption,
        )}
      />
    );

    const ValueContainer = ({ children, ...props }) => (
      <components.ValueContainer {...props}>{children}</components.ValueContainer>
    );

    return (
      <ReactSelect
        className={css(fontStyles.semibold, styles.selectContainer)}
        components={{
          Control,
          DropdownIndicator,
          IndicatorSeparator,
          Menu,
          Option,
          ValueContainer,
        }}
        isSearchable={true}
        noOptionsMessage={() => noOptionsMessage}
        onChange={onChange}
        options={options}
        value={value}
      />
    );
  }
}

Select.propTypes = {
  noOptionsMessage: PropTypes.string,
  onChange: PropTypes.func.isRequired,
  options: PropTypes.arrayOf(PropTypes.object),
  value: PropTypes.object,
};

export default Select;
...