Access styled-component's theme inside react-select

[devanSAGA]

Hey folks,

I was looking for ways to override the styles of react-select with styled-components.
The react-select exposes a styles prop, which accepts an object with access to existing styles for a component and component state. Although, I was not able to find a way using which I can access a theme prop of the styled-components when following this approach.

(Context: styled-components exposes a ThemeProvider, and any styled-component instance defined as a descendant of ThemeProvider has access to the theme object via props)

I also found another approach, mentioned in the documentation of replacing components and I was able to override styles with something like this,

import { components } from 'react-select';
...
...
const StyledOption = styled(components.Option)`
 // overriding styles here
`

But here also I was unable to access the theme prop coming from the styled-component's ThemeProvider as it was getting overridden by the theme prop coming from the react-select.

I am able to still solve my use-case by targeting the components of react-select by their classnames like,

  & .Select__control {
    // overriding styles here
  }
  
  & .Select__placeholder {
    // overriding styles here
  }

But is there a better way to use styled-components along with react-select such that we able to access the theme object of styled-components?

[devanSAGA]

Could someone help with this?

[ayozebarrera]

I'm applying my theme style on react-select like this

import ReactSelect from 'react-select';
import styled from 'styled-components';
import theme from 'utils/theme';

const reactSelectStyles = {
  indicatorSeparator: styles => {
    const backgroundColor = theme.colors.white;

    return { ...styles, backgroundColor };
  },
  clearIndicator: styles => {
    const color = theme.colors.white;

    return { ...styles, color };
  },
  dropdownIndicator: styles => {
    const color = theme.colors.white;

    return { ...styles, color };
  },
  control: (styles, { isFocused }) => {
    const borderColor = isFocused ? theme.colors.primary : theme.colors.nav;
    const boxShadow = isFocused ? `${theme.colors.primary}33 0px 0px 0px 3px` : 'none';
    const backgroundColor = theme.colors.nav;
    const minHeight = '2.5rem';
    const paddingLeft = '0.25rem';
    const paddingRight = '0.25rem';

    return {
      ...styles,
      backgroundColor,
      borderColor,
      boxShadow,
      minHeight,
      paddingLeft,
      paddingRight,
      '&:hover': {},
    };
  },
  option: (styles, { isFocused, isSelected }) => {
    const backgroundColor = isSelected
      ? theme.colors.primary
      : isFocused
      ? theme.colors.secondaryAlpha
      : theme.colors.nav;
    return { ...styles, backgroundColor };
  },
  placeholder: styles => {
    const color = theme.colors.white;
    const fontSize = theme.fontSizes.sm;
    const opacity = 0.6;

    return { ...styles, color, opacity, fontSize };
  },
  input: styles => {
    const color = theme.colors.white;

    return { ...styles, color };
  },
  singleValue: styles => {
    const color = theme.colors.white;
    const fontSize = theme.fontSizes.sm;

    return { ...styles, color, fontSize };
  },
  multiValue: styles => {
    const backgroundColor = theme.colors.secondaryAlpha;
    const fontSize = theme.fontSizes.sm;

    return { ...styles, backgroundColor, fontSize };
  },
  multiValueLabel: styles => {
    const color = theme.colors.white;
    const fontSize = theme.fontSizes.xs;

    return { ...styles, color, fontSize };
  },
  menu: styles => {
    const backgroundColor = theme.colors.nav;

    return { ...styles, backgroundColor };
  },
  menuPortal: styles => {
    const backgroundColor = theme.colors.nav;

    return { ...styles, backgroundColor, zIndex: 9999 };
  },
};

return (
    <ReactSelect
      {...componentProps}
      value={valueAsObject}
      styles={reactSelectStyles}
      onChange={option => {
        const valueAsString = option ? option.value : option;
        onChange(valueAsString);
      }}
    />
);

Hope this helps!