how to make conditional with props and react dynamic theme?

Question

I need to set the border on the hover of my checkbox, but when it is checked activated, that border on the hover does not exist. I have a file with tokens, how can I pass that border through them dynamically?

I would like it to be like this, with this borders.borderWidthThin being searched in my file

but this is giving error, I'm using styled components

&:hover {
    border: ${(props) => (props.checked ? 'none' : '${borders.borderWidthThin}')};
    cursor: pointer;
  }

Answer 1

I'm able to do this without using the props arrow function as so:

&:checked:hover {
    border-color: red;
    cursor: pointer;
  }

It will only display if the box is checked and hovered. But if you want to use the prop function you can do this:

&:checked:hover {
border: ${props => props.checked ? 'red' : `${borders.borderWidthThin}`};
cursor: pointer;

}