Question

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

例如：

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


getFontSize = () => {

}

我想在功能getFontSize（）中记录组件Hello的字体大小。我尝试使用refs和InnerRefs，但是没有运气。

Answer 1

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

示例（CodeSandbox）

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)} />;
  }
}

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

1 个答案: