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

Question

我使用库： https://www.npmjs.com/package/react-edittext 。 我尝试从编辑按钮中删除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

Output 这里： https://react-ntqzyc.stackblitz.io/

Answer 2

可能是这样的：

1. 您尚未导入.js文件中所需的所有内容。
2. 或者你还没有定义你的onSave() function。 类似： onSave = val => { console.log('Edited Value -> ', val) }