如何在 React 中更改文本选择/突出显示颜色（通常是 ::selection）？

Question

我想将其从默认的蓝色更改为蓝色，但似乎找不到任何关于此的信息。平时不行：

::-moz-selection, ::selection {
    background: #AFAFAF;
}

Answer 1

::-moz-selection

和

::selection

是特定于浏览器的伪类。如果一个供应商浏览器（chrome）不理解其他供应商浏览器的前缀，它会忽略该块下的规则。所以建议分离浏览器特定的伪类。

::-moz-selection {
  background: #AFAFAF;
}
::-webkit-selection {
  background: #AFAFAF;
}
::selection {
  background: #AFAFAF;
}

https://jsfiddle.net/nutboltu/hgumjs95/7/

Answer 2

因为它们都是范围，所以你不能在一个样式定义中同时定义它们。将它们分成 2 种不同的样式，它会起作用。

::-moz-selection{
  background: #ffb7b7;
}
::selection{
  background: #ffb7b7;
}

Answer 3

我无法直接在 React 中设置特定于选择的 CSS 伪元素。通过在 CSS 文件中定义选择样式并将颜色设置为来自 React 的 CSS 变量，设法实现了这一点。

CSS：

.styled-div {
  ::-moz-selection {
    background: var(--selection-color);
  }
  ::-webkit-selection {
    background: var(--selection-color);
  }
  ::selection {
    background: var(--selection-color);
  }
}

反应（打字稿）：

const selectionColor = "#ABABAB";
const divStyle = { "--selection-color": selectionColor } as React.CSSProperties;
return (
  <div className="styled-div" style={divStyle}>
  </div>
);