Извлечь имя класса с помощью styled-компонентов

Question

Я использую библиотеку пользовательского интерфейса, которая требует, чтобы вы передали имя класса в skin проп, чтобы настроить внутренние компоненты компонента. Что-то вроде:

import styles from './ProfileInfoSkins.css';

...

<ProfileInfo skin={{ headline: styles.headline }}

Мне интересно, есть ли способ сделать это с помощью стилевых компонентов и избежать необходимости создавать отдельный файл css.

Answer 1

.attrs

Это цепной метод, который присоединяет некоторые реквизиты к стилизованному компоненту. Первый и единственный аргумент - это объект, который будет объединен с остальными реквизитами компонента.

Присоединение дополнительных реквизитов

const StyledProfileInfo = styled(ProfileInfo).attrs(
  props => ({
    skin: {
      headline: { /* headline style object */ },
      // add whatever other skin object properties needed
    },
  }), 
);