将:: after的样式设置为等于所选元素的样式

Question

我在我的React app中使用SCSS和css-modules，需要根据所选元素的backgroundColor设置:: after元素的颜色，后者通过JSX样式prop接收它。

JSX元素：

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

className变量：

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的元素）？

P.S。是的，::after创建工具提示的指针。

Answer 1

例如，您无法通过更改currentColor属性直接通过Javascript控制伪元素的属性。但是，您可以通过继承和CSS变量间接更改属性。其他选项（在此答案中未说明）包括::after和更改样式表规则。

的继承：

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 );伪元素可以使用CSS关键字inherit继承其父级的边框颜色（和其他属性）。

  

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

示例：

.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>

::after

CSS变量：

如果您需要更多地控制::after CSS属性，可以使用CSS variables。您可以将工具提示的背景颜色和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 );元素的边框颜色设置为变量，然后通过JS更新变量（在本例中为React）。

注意： IE不支持CSS变量。从版本5.6.0开始，React支持样式prop中的CSS变量。

示例：

.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>

SELECT DISTINCT column1, column2, ...
FROM table_name;