如何使行通过不影响列表中的整个文本

Question

我在 react 中有这段代码，当完成时在 textDecoration 上有内联样式的直通是真的：

<li
    onClick = {onClick}
    style={{
      textDecoration: completed ? 'line-through' : 'none',
    }}
  >
    {text} 
      <span>
       <a 
         style={{ textDecoration: 'none', color: 'red' }} 
         onClick={onTrashClick} 
         href="#"
       >
         X
       </a>
      </span>
  </li>

我试图在我的 href 中覆盖 li 中的样式并将其包含在 span 中，但我没有成功，我也尝试将样式放在 span 中但没有成功，我希望通过的行不影响 X我的 href 中的文字。有帮助吗？

Answer 1

创建一个跨度以将您的 text 放入并将样式应用于该跨度而不是整个 li:

   <li onClick = {onClick}>
       <span 
         style={{
           textDecoration: completed ? 'line-through' : 'none',
         }}
       >
         {text} 
       </span>
       <a 
         style={{ color: 'red' }} 
         onClick={onTrashClick} 
         href="#"
       >
         X
       </a>
  </li>

如何使行通过不影响列表中的整个文本

How to make line through not affect the whole text in a list

css

reactjs

inline-styles