javascript - 如何从库 react-editext 中的按钮中删除 `text-decoration: line-through`？

Question

我使用图书馆:https://www.npmjs.com/package/react-editext .我尝试从编辑按钮中删除 text-decoration: line-through ，当我从取消和提交按钮中按下编辑按钮时。它尝试为按钮提供 text-decoration: none !important 样式，但删除线不会从按钮上消失。

此处演示:https://stackblitz.com/edit/react-dmfbqc

图片:https://imgur.com/O5hb715

CSS

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

.styles_Editext__button__6H8n_, .styles_Editext__edit_button__hthOZ {
  text-decoration: none !important;
}

.styles_Editext__save_button__3WN6q {
  text-decoration: none !important;
}

.styles_Editext__cancel_button__259hb {
  text-decoration: none !important;
}

javascript

import React, { Component } from 'react';
import { render } from 'react-dom';
import './style.css';
import EdiText from 'react-editext'


class App extends Component {
  constructor() {
    super();
    this.state = {
      name: 'React'
    };
  }

  onSave = val => {
   console.log('Edited Value -> ', val)
  }

  render() {
    return (
      <div className="lineThrough">
        <EdiText
          type="text"
          value='What is real? How do you define real?'
          onSave={this.onSave}
        />
      </div>
    );
  }
}

Answer 1

试试这个:

CSS 文件::

 h1, p {
  font-family: Lato;
}

.lineThrough__none > :first-child {
  text-decoration: line-through;
}
.lineThrough__none {
  text-decoration: none;
}

索引 js::

<div>
        <EdiText
          type="text"
          value='What is real? How do you define real?'
          viewContainerClassName='lineThrough__none'
          onSave={this.onSave}
        />
      </div>

此处演示:https://stackblitz.com/edit/react-ntqzyc?file=index.js

此处输出:https://react-ntqzyc.stackblitz.io/