Стилизация элемента Select из react-select - PullRequest
Новая
       74

Стилизация элемента Select из react-select

0 голосов
/ 10 июля 2020

Я использую элемент select из библиотеки response-select, а в моем проекте я использую стилизованные компоненты. Я хотел спросить, можно ли стилизовать его в моем файле styles.ts. если это невозможно, не могли бы вы дать какие-нибудь предложения, как сделать стиль ??

Внутри React: F C

import Select from 'react-select'

...

const options = [
    { value: 'Income', label: 'Income' },
    { value: 'Expense', label: 'Expense' },
  ]

...

       <Form>
        <InputElement />
        <Select options={options} />
      </Form>

Ответы [ 2 ]

1 голос
/ 10 июля 2020

Да, можно предоставить свои собственные стили, react-select предоставляет объектно-ориентированный подход для стилизации компонента Select.

Ссылка на docs

Вот простой пример, 

const customStyles = {
  option: (provided, state) => ({
    ...provided,
    borderBottom: '1px dotted pink',
    color: state.isSelected ? 'red' : 'blue',
    padding: 20,
  }),
  control: () => ({
    // none of react-select's styles are passed to <Control />
    width: 200,
  }),
  singleValue: (provided, state) => {
    const opacity = state.isDisabled ? 0.5 : 1;
    const transition = 'opacity 300ms';

    return { ...provided, opacity, transition };
  }
}

const App = () => (
    <Select
      styles={customStyles} // pass the customStyles object to the styles prop
      options={...}
    />
);

Выбор очень настраивается с помощью клавиш, предоставленных для настраиваемого объекта стиля .

Следует помнить одну вещь: что каждый ключ будет функцией стиля, где первым аргументом будут предоставленные стили, а вторым аргументом будет состояние выбора, т.е. isFocused, isSelected.

EDIT - Пока это предлагаемый способ предоставления пользовательских стилей с помощью объектно-ориентированного подхода. Если вы действительно хотите стилизовать компонент Select с помощью styled-components, вот пример (вы должны предоставить свойство classNamePrefix through и стиль на основе classNames)

Подробнее о стилях с classNames документы 

import Select from 'react-select';
import styled from 'styled-components';

const SelectElement = styled(Select)`
  .react-select-container {
    // custom styles
  }

  .react-select__control {
    // custom styles
  }

  .react-select__indicators {
    // custom styles
  }
`;

const MySelect = (props) => {
  return (
     <SelectElement classNamePrefix="react-select" options={options} {...props}/>
  )
}
1 голос
/ 10 июля 2020

Да, вы можете сделать это так 

import ReactSelect from 'react-select';
import styled from 'styled-components';

const ReactSelectStyled = styled(ReactSelect)`
   // you have to provide custom styles through class names
   // example
   .react-select__option {
      // custom styles
   }
`;

Кроме того, вы можете изменить префикс имени класса (например, часть «response-select» в именах классов), указав префикс через classNamePrefix поддержка компонента Select.

...