Это замечательная работа, Херардо Фернандес.🎉

Это замечательная работа, Херардо Фернандес.🎉 Мне нравится использование подробных функций для динамического выбора значений свойств background и color
на основе значений свойств и темы приложения. 😁
Тем не менее, я чувствую, что полное определение функции, прикрепленное к свойствам background и color, делает целые стили компонента кнопки отвлекающими. Трудно просматривать стили кнопок, не отвлекаясь на функции. Вы можете поместить определение функции отдельно от свойств CSS. Таким образом, стили становятся краткими, а функции выбора значений также краткими (мы могли бы иметь их в одном файле).

import styled from 'styled-components';
export default styled.button`
  background: ${backgroundValueChooser};
  color: ${colorValueChooser};
  /**
  /* Other styles here
   */
`;
const backgroundValueChooser = (props) => {
  switch (props.type) {
    case 'blue':
      return props.theme.color.blue;
    case 'lightGray':
      return props.theme.color.gray200;
    default:
      return props.theme.color.primary;
  }
};
const colorValueChooser = (props) => {
  switch (props.type) {
    case 'blue':
      return 'white';
    case 'lightGray':
      return props.theme.color.body;
    default:
      return 'white;
  }
};

Что вы думаете об этом?