App.js

import { BaseTheme, Theme, ThemeManager } from 'styled-responsive-theming'

import Button from './Button'

const breakpoints = [
  480,
  600,
  840,
  960,
  1280,
  1440,
  1600,
  1920
]

const App = () => (
  <BaseTheme breakpoints={breakpoints}>
    <Button>Default Button</Button>
  
    <Theme overrideWith={{
      Button: {
        backgroundColor: ['palevioletred', 'papayawhip',,, 'palevioletred']
      }
    }}>
      <Button>Reasponsive Background Button</Button>
    </Theme>
  
    <Theme overrideWith={{
      Button: ThemeManager.getTheme('Button.extraBordered')
    }}>
      <Button>Extra Bordered Button</Button>
    </ThemeOverride>
  </BaseTheme>
)

Button.js

import styled, { css } from 'styled-components'
import { ThemeManger } from 'styled-responsive-theming'

const applyButtonTheme = ThemeManager.createTheme('Button', {
  default: {
    fitContent: false,
    radius: '0.25em',
    backgroundColor: 'black',
    borderColor: 'white',
    borderWidth: '0.125em',
    hoverBackgroundColor: 'springgreen',
    hoverBorderColor: 'white',
    hoverTextColor: 'white',
    textColor: 'white'
  },
  extraBordered: {
    radius: '1em'
  }
})

const Button = styled.button`
  display: flex;
  justify-content: center;
  align-items: center;

  text-transform: uppercase;

  border-style: solid;

  transition-property: background-color, border-color, color;
  transition-duration:  0.3s;

  outline: none;

  padding: 0.5em 1em;

  ${applyButtonTheme(({
    fitContent,
    radius,
    borderWidth,
    backgroundColor,
    borderColor,
    textColor,
    hoverBackgroundColor,
    hoverBorderColor,
    hoverTextColor
  }) => css`
    background-color: ${backgroundColor};
    border-color: ${borderColor};
    border-width: ${borderWidth};
    color: ${textColor};

    border-radius: ${radius};

    &:hover {
      background-color: ${hoverBackgroundColor};
      border-color: ${hoverBorderColor};
      color: ${hoverTextColor};
    }

    width: ${fitContent ? 'auto' : '100%'};
  `)}
`

export default Button