设置 ::after 的样式等于被选元素的样式答案

【问题标题】：Set the style of ::after to be equal to the style of the selected element设置 ::after 的样式等于被选元素的样式
【发布时间】：2018-05-03 21:16:32
【问题描述】：

我在我的 React 应用程序中将 SCSS 与 css-modules 一起使用，并且需要根据所选元素的 backgroundColor 设置 ::after 元素的颜色，该元素通过 JSX 样式属性接收它。

JSX 元素：

<span 
    afterColor={myBackgroundColor}
    className={className} 
    style={{ myBackgroundColor, myColor }}
>Text</span>

类名变量：

className = [scss.classOne, scss.classTwo].join(' ')

样式：

.className::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: myBackgroundColor transparent transparent transparent;
}

问题：
如何访问 myBackgroundColor（与 ::after 一起使用的元素）？

附：是的，::after 创建工具提示的指针。

【问题讨论】：

您不能操作 :after 或更改其颜色，它不是实际 dom 的一部分，您必须将 className 更改为具有不同后 psudo 类的不同类

标签： javascript reactjs sass jsx

【解决方案1】：

您不能通过 Javascript 直接通过更改 style 属性来控制伪元素的属性。但是，您可以通过继承和 CSS 变量间接更改属性。其他选项（未在此答案中演示）包括 currentColor，以及更改样式表规则。

继承：

::after 伪元素可以使用 CSS 关键字 inherit 继承其父元素的边框颜色（和其他属性）。

inherit CSS 关键字导致指定它的元素从其父元素中获取属性的计算值。

示例：

const Tooltip = ({ myBackgroundColor, children }) => (
  <div className="tooltip" style={{ 
    background: myBackgroundColor,
    borderColor: myBackgroundColor // set the borderColor as well
  }}>{ children }</div>
);

ReactDOM.render(
  <Tooltip myBackgroundColor="red">Text</Tooltip>,
  demo
);

.tooltip {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 10px;
}

.tooltip::after {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent;
  border-top-color: inherit;
  content: "";
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="demo"></div>

CSS 变量：

如果您需要对::after CSS 属性进行更多控制，可以使用CSS variables。可以将tooltip的背景颜色，::after元素的边框颜色设置为一个变量，然后通过JS（本例为React）更新变量。

注意： IE 不支持 CSS 变量。 React 从 5.6.0 版本开始支持 style 属性中的 CSS 变量。

示例：

const Tooltip = ({ myBackgroundColor, afterBackgroundColor, children }) => (
  <div className="tooltip" style={{ 
    '--afterColor': afterBackgroundColor, 
    background: myBackgroundColor 
  }}>{ children }</div>
);

ReactDOM.render(
  <Tooltip myBackgroundColor="red" afterBackgroundColor="blue">Text</Tooltip>,
  demo
);

.tooltip {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 10px;
}

.tooltip::after {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent;
  border-top-color: var(--afterColor);
  content: "";
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.6.2/react-dom.min.js"></script>

<div id="demo"></div>

【讨论】：