javascript - 如何从样式化组件 (React) 访问 CSS 值？

Question

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

例如:

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


getFontSize = () => {

}

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

Answer 1

您可以在组件上使用 innerRef 属性来获取对 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)} />;
  }
}