Styled component theme

[armandabric]

In you application we use the styled-component theme to define the base colors and fonts of our application. In the same application we have multiple theme that is switched based on the current route.

To work with the css variable used by react-styled-select, I've use a work a dirty tricks:

import StylableSelect from 'react-styled-select';

const injectGlobalWithTheme = theme => {
    injectGlobal`
        :root {
            --styled-select-placeholder-color: grey;
            --styled-select-color: #555555;
            --styled-select-background-color: #ededed;
            --styled-select-border-width: 3px;
            --styled-select-border-radius: 4px;

            --styled-select-control-border-color: #ededed;
            --styled-select-control-focused-border-color: ${theme.accentColor};

            --styled-select-option-focused-background-color: ${theme.accentColor};

            --styled-select-menu-outer-background-color: ${theme.secondaryFontColor};
            --styled-select-menu-outer-border-color: #555555;
            --styled-select-menu-outer-border-radius: 4px;
            --styled-select-menu-outer-margin: 1px 0 0 0;
        }
    `;
};

export const Select = styled(StylableSelect)`
    ${({ theme }) => injectGlobalWithTheme(theme)}; // Here is the magic ✨

    min-width: 200px;
`;

Do not look at the variable names, I'm not up to date 😋

Did you have another way/idea to work with theme and CSS var ?

[agutoli]

Hi, @Spy-Seth. Good? So, I don't know if I like the idea about "styled themes", because this is a generic component, if I want to use glamorousjs or emotionjs in my project? I can not use styled-theme when I use emotionjs, right?

IMHO, we have to keep it more generic, without specifics tecnologies, I chose styled-components just in the development version, when this is compiled, the component is just a pure react component.