JIYIK CN >

Use textDecorationthe strikethrough property to add a strikethrough to text in React, for example <span style={{textDecoration: 'line-through'}}>. The text-decoration CSS property sets the appearance of text decoration lines.

const App = () => {
  return (
    <div>
      <h2>
        <span style={{textDecoration: 'line-through'}}>Hello</span> world
      </h2>
    </div>
  );
};

export default App;

If we need to remove an element on click, please check my other article - Remove (strikethrough) text on click in React .

We use text-decorationthe property to cross out text in React.

请注意, when specified as an inline style, multi-word attributes are camelCase.

The first set of curly braces in an inline style mark the beginning of the expression, and the second set of curly braces is an object containing the style and value.

<span style={{textDecoration: 'line-through'}}>Hello</span> world

When an element's textDecorationattribute is set to line-through, its text will be struck through.

If we need to do this often, we can extract the span element into a component that renders its children.

function StrikethroughText({children}) {
  return <span style={{textDecoration: 'line-through'}}>{children}</span>;
}

const App = () => {
  return (
    <div>
      <h2>
        <StrikethroughText>Hello</StrikethroughText> world
      </h2>
    </div>
  );
};

export default App;

This code example achieves the same result. Whatever we StrikethroughTextpass between the opening and closing tags of the component will have its text crossed out.

Another solution is to define the strikethrough class in your global css file.

.strikethrough {
  text-decoration: line-through;
}

Here is how we import the App.css file and use the strikethrough class.

import './App.css';

const App = () => {
  return (
    <div>
      <h2>
        <span className="strikethrough">Hello</span> world
      </h2>
    </div>
  );
};

export default App;

This approach enables us to reuse common styles by defining them in a global css file.

It is a best practice to import global css files in your index.js file, because this way they will not only be loaded when some component is mounted.