如何从样式化组件（React）访问 CSS 值？

Question

我想访问分配给函数中样式化组件的 CSS 值。我该怎么做？

例如：

const Hello = styled.p `
   font-size: 10px;
`;


getFontSize = () => {

}

我想在函数 getFontSize() 中记录组件 Hello 的字体大小。我试过使用 refs 和 InnerRefs 但没有运气。

Answer 1

您可以在组件上使用innerRef prop 来获取对DOM 节点的引用，然后在节点上使用window.getComputedStyle 来获取font-size。

示例

const Hello = styled.input`
  padding: 0.5em;
  margin: 0.5em;
  color: palevioletred;
  background: papayawhip;
  border: none;
  border-radius: 3px;
  font-size: 10px;
`;

class Form extends React.Component {
  ref = null;

  componentDidMount() {
    this.getFontSize();
  }

  getFontSize = () => {
    console.log(
      window.getComputedStyle(this.ref, null).getPropertyValue("font-size")
    );
  };

  render() {
    return <Hello innerRef={ref => (this.ref = ref)} />;
  }
}