Styletron team worked hard, and added «styleProps» - special property to operate with element's styles. «styleProps» object won't be passed to the actual DOM-element which makes React happy, and you won't get ugly warnings about it 🎉

styleProps.md

🤔 How it was before styleProps existed:

const OnboardingProgressContainer = styled('div', ({ visible = true }: { visible: boolean }) => ({
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'flex-end',
    position: 'relative',
    flex: '0 0 auto',
    visibility: visible ? 'visible' : 'hidden',
    opacity: visible ? '1' : '0',
    transition: 'opacity .3s ease, visibility .3s ease',
    height: '81px',
    background: 'white'
}));

// usage
<OnboardingProgressContainer visible={this.isProgressVisible}>
    // childrens
</OnboardingProgressContainer>

🛑 That cause ugly React warnings like that:

Warning: Received `true` for non-boolean attribute `visible`. If this is expected, cast the value to a string.
    in div (created by Styled(div))
    in Styled(div) (created by OnboardingWrapper)
    in div (created by Styled(div))
    in Styled(div) (created by OnboardingWrapper)
    in OnboardingWrapper (created by inject-OnboardingWrapper-with-userStore-mobileStore-channelsStore-channelStore-windowStore)
    in inject-OnboardingWrapper-with-userStore-mobileStore-channelsStore-channelStore-windowStore (created by RouterContext)
    in div (created by App)
    in App (created by RouterContext)
    in RouterContext (created by Router)
    in Router (created by App)
    in StyletronProvider (created by App)
    in Provider (created by App)
    in div (created by PermissionProvider)
    in PermissionProvider (created by App)
    in MuiThemeProvider (created by App)
    in App

🙋‍ How to deal with it after styleProps came:

interface OnboardingProgressContainerProps {
    styleProps: { visible: boolean; }
}

const OnboardingProgressContainer = styled('div', ({ styleProps }: OnboardingProgressContainerProps) => ({
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'flex-end',
    position: 'relative',
    flex: '0 0 auto',
    visibility: styleProps.visible ? 'visible' : 'hidden',
    opacity: styleProps.visible ? '1' : '0',
    transition: 'opacity .3s ease, visibility .3s ease',
    height: '81px',
    background: 'white'
}));

// usage
<OnboardingProgressContainer styleProps={{visible: this.isProgressVisible}}>
    // childrens
</OnboardingProgressContainer>