HTML translate attribute doesn't work with styled-components

Question

I want to avoid my component's contents to get translated by Google translate. For that, I am trying to use translate="no" using styled-components's attr as below but it doesn't work:

const MyComp = styled.div.attrs(props => ({
   name: props.id,
   translate: props.translate,
}))`
padding: 0;
`

<MyComp id="some-id" translate="no"></MyComp>

The name property is working fine but translate property is not working. Is there any other way to disable the translation?

Answer 1

There is a issue for that in styled-components github:

https://github.com/styled-components/styled-components/pull/3619

if you use yarn would could do this work around:

add this in to your package.json

"resolutions": { "styled-components/@emotion/is-prop-valid": "^1.1.0" }