textDecoration: line-through not working in React Native styled component

Viewed 857

I created a styled component

const StrikeThrough = styled(StandardText)`
    textDecoration: line-through;
`;

and called it with children, similar to <StrikeThrough>Write text here</StrikeThrough> but the text rendered doesn't have this decoration. Why might this be?

EDIT: Other things I've tried that don't work

const StrikeThrough = styled(StandardText)`
    textDecorationLine: line-through;
    textDecorationStyle: solid;
`;
const StrikeThrough = styled(StandardText)`
    text-decoration: line-through;
`;

EDIT: To answer my own question, it looks like I had to do it on the Text component and couldn't make a styled component on top of my styled component.

3 Answers

Use text-decoration instead of textDecoration.

You are using Styled Component so use text-decoration instead of textDecoration and use dot instead of brackets:

const StrikeThrough = styled.Text`
    text-decoration: line-through;
`;

use text-decoration: line-through;

you can also style the line with text-decoration-color: red

Related