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

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>

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

Answer 1

创建一个 span 以将您的 text 放入并将样式应用到它而不是整个 li:

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