CSS errors when using styled-components

[shengchen-houzz]

Please make sure you are testing with the latest release of html2canvas. Old versions are not supported and issues reported for them will be closed.

Please follow the general troubleshooting steps first:

• [x] You are using the latest version
• [x] You are testing using the non-minified version of html2canvas and checked any potential issues reported in the console

Bug reports:

I'm working on printing out a table list with checkboxes. To customize the checkbox style, I use styled-components module as followed:

const StyledCheckbox = styled.input`
    &:checked {
        ${css({ bg: '#4DBC15' })}
    }
    ${css({ borderRadius: '50%' })}
`;

The ideal view should be like:

However, the printed view is like:

Specifications:

• html2canvas version tested with: 1.4.1
• Browser & version: Chrome 126.0.6478.127
• Operating system: MacOS 14.5

[PartishtaP]

I would like to work on this issue. Please assign this to me