React/Styled-Components: Need to hand roll a dropdown with multiple versions that a developer could use by passing a type in

Question

A have a dropdown that I created using styled-components. I now need to refactor it into a react component that populates it's options based on props and also offers different styles that can be used across the app by simply including the dropdown and passing it a type as a prop like <button type="small">, <button type="large"> etc. Does anyone have any suggestions on how to do this or any resources I can look into for more information? I included a button element from another project as an example below

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

Answer 1

Generally, it's best to have one StyledComponent that adapts to the props it's given. Taking an example from the styled-components documentation:

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;
`;

Not really knowing exactly what kind of styling you're going after, here's a simple example based on the dropdown you have in your question.

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;