How to use styled-config - 10 common examples

const color = (props) => (
  props.muted &&
  css`
    color: ${getColor(props, 'formText', 'colorMuted')};
  `
);

const color = (props) => (
  props.disabled &&
  css`
    color: ${getColor(props, 'formCheckInput', 'colorDisabled')};
    & + label {
      color: ${getColor(props, 'formCheckInput', 'colorDisabledLabel')};
    };
  `
);

const padding = (props) => (
  (props.sm || props.lg) &&
  css`
    padding-right: ${getPadding(props, 'formControlPlainText', 'smRight')};
    padding-left: ${getPadding(props, 'formControlPlainText', 'smLeft')};
  `
);

const paddingLeft = (props) => (
  props.inline &&
  css`
    padding-left: ${getPadding(props, 'formCheck', 'inlineLeft')};
  `
);

const padding = (props) => (
  props.brand &&
  css`
    padding-top: ${getPadding(props, 'navbarLink', 'brandTop')};
    padding-bottom: ${getPadding(props, 'navbarLink', 'brandBottom')};
  `
);

const backgroundColor = (props) => (
  css`
    background-color: ${getColor(props, 'navbar', 'backgroundColor')} !important;
  `
);

const buttonToggler = (props) => (
  css`
    color: ${getColor(props, 'button', 'toggle', 'color')};
    border-color: ${getColor(props, 'button', 'toggle', 'borderColor')};
    &:hover, &:focus {
      color: ${getColor(props, 'button', 'toggle', 'color')};
      border-color: ${getColor(props, 'button', 'toggle', 'borderColor')};
    }
  `
);

const borderColor = (props) => (
  css`
    border-color: ${getColor(props, 'navbar', 'borderColor')};
  `
);

const color = (props) => (
  css`
    color: ${getColor(props, 'navbar', 'color')};
  `
);

const buttonToggler = (props) => (
  css`
    color: ${getColor(props, 'button', 'toggle', 'color')};
    border-color: ${getColor(props, 'button', 'toggle', 'borderColor')};
    &:hover, &:focus {
      color: ${getColor(props, 'button', 'toggle', 'color')};
      border-color: ${getColor(props, 'button', 'toggle', 'borderColor')};
    }
  `
);