Datepicker can't be combined with styled-components

[mpaccione]

The passing of the className prop should not be on the input directly but on the top level element. When you set it directly to the input I cannot styled the injected date popup. This needs to be reworked.

The below code should work but doesn't of course.

import React from 'react'
import SemanticDatepicker from "react-semantic-ui-datepickers";
import styled from 'styled-components'
import "react-semantic-ui-datepickers/dist/react-semantic-ui-datepickers.css";

const StyledDatepicker = styled(SemanticDatepicker)`
    * {
        background-color: ${props => props.theme.input};
        color: ${props => props.theme.txt};
    }
    // or
    .clndr-calendars-segment {
        background-color: ${props => props.theme.input};
        color: ${props => props.theme.txt};   
    }
`

const ThemedDatepicker = ({ props }) => (
    <StyledDatepicker {...props} />
)

export { ThemedDatepicker }

[arthurdenner]

There's an open PR trying to solve this I think but I don't have much time to look at and update this project at the moment. If you want to tweak the current implementation to fix your needs, you can use something like patch-package or fork it. I'll leave the issue open as it's somewhat a problem and would be nice to support overrides with styled-components.

[mpaccione]

Thanks for responding. Given that you don't have time to review open PR's I wont make one. However I will fix this to solve my own needs.

patch-package looks cool, thanks for the tip!