React / Styled-Components: необходимо вручную свернуть раскрывающийся список с несколькими версиями, которые разработчик может использовать, передав тип - PullRequest
Новая
       38

React / Styled-Components: необходимо вручную свернуть раскрывающийся список с несколькими версиями, которые разработчик может использовать, передав тип

0 голосов
/ 21 июня 2019

A есть раскрывающийся список, который я создал с помощью styled-компонентов. Теперь мне нужно преобразовать его в компонент реагирования, который заполняет его параметры на основе реквизита, а также предлагает различные стили, которые можно использовать во всем приложении, просто включив раскрывающийся список и передав ему тип в виде реквизита, например <button type="small">, <button type="large"> и т. Д. Кто-нибудь есть какие-либо предложения о том, как это сделать или какие-либо ресурсы, которые я могу посмотреть для получения дополнительной информации? Я включил элемент кнопки из другого проекта в качестве примера ниже

Button Example

import React from 'react'
import PropTypes from 'prop-types'
import styled from 'styled-components'
import { Button as AntButton } from 'antd'

const Button = ({ children, type = 'default', ...props }) => {
  const StyledButton = buttonTypes[type] || AntButton

  return (
    <StyledButton
      type={type}
      {...props}
    >
      {children}
    </StyledButton>
  )
}

const buttonTypes = {
  success: styled(AntButton)`
    ${({ theme }) => theme.buttonStyles.success}
  `,
  warning: styled(AntButton)`
    ${({ theme }) => theme.buttonStyles.warning}
  `,
  danger: styled(AntButton)`
    ${({ theme }) => theme.buttonStyles.danger}
  `,
  link: styled(AntButton)`
    && {
      background-color: transparent;
      border: none;
      color: ${({ theme }) => theme.colors.primary};
      display: inline;
      margin: 0;
      padding: 0;
      text-decoration: none;
      box-shadow: none;

      :after,
      :hover,
      :focus {
        border: none;
        text-decoration: none;
      }
    }
  `
}

Button.propTypes = {
  type: PropTypes.oneOf([
    'default',
    'primary',
    'secondary',
    ...Object.keys(buttonTypes)
  ]),
  children: PropTypes.node
}

Button.defaultProps = {
  children: null
}

export default Button

Dropdown (in progress)

import styled from 'styled-components'

const Dropdown = styled.select`
  padding: 5px 45px 5px 10px;
  font-size: 1.2rem;
  line-height: 1.4rem;
  font-weight: 500;
  color: black;
  border: 2px solid black;
  height: 36px;
  background-color: ${({ theme }) => theme.colors.white};
  border-radius: 0;
  appearance: none;
  background-image: url(${icon});
  background-repeat: no-repeat;
  background-position: right 8px center;
`
export default Dropdown

1 Ответ

1 голос
/ 21 июня 2019

Как правило, лучше иметь один StyledComponent, который адаптируется к заданным реквизитам.Возьмем пример из документации по стилям : 

const Button = styled.button`
  /* Adapt the colors based on primary prop */
  background: ${props => props.primary ? "palevioletred" : "white"};
  color: ${props => props.primary ? "white" : "palevioletred"};

  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

Не совсем точно зная, к какому стилю вы подходите, вот простой пример, основанный на выпадающем менюваш вопрос. 

import styled, { css } from 'styled-components'

const Dropdown = styled.select`
    padding: 5px 45px 5px 10px;
    font-size: 1.2rem;
    line-height: 1.4rem;
    font-weight: 500;
    color: black;
    border: 2px solid black;
    height: 36px;
    border-radius: 0;
    appearance: none;
    background-image: url(${icon});
    background-repeat: no-repeat;
    background-position: right 8px center;

    ${({ theme, type }) => {
        switch(type) {
            case 'light': 
                return css`
                    background-color: ${theme.colors.white};
                    color: ${theme.colors.darkGrey};
                `;
            case 'dark':
                return css`
                    background-color: ${theme.colors.darkGrey};
                    color: ${theme.colors.white};
                `
            case default:
                return css`
                    background-color: transparent;
                    color: ${theme.colors.darkGrey};
                `
        }

    }}
`;

export default Dropdown;
...