Next.js：如何从元素中获取应用样式？

Posted 2023-03-16

【中文标题】Next.js：如何从元素中获取应用样式？

【英文标题】：Next.js: How to get applied styles from element?

【发布时间】：2021-12-07 05:52:41

【问题描述】：

假设我有 global.css

.test 
  background-color: black;
  width: 50px;
  height: 50px;

出于某种原因，我需要从应用元素中获取样式数据。我试过 refs 但它总是返回空字符串。

import  useState, useEffect, useRef  from "react";

const IndexPage = () => 
  const divEl = useRef<htmlDivElement | null>(null);
  const [divStyle, setDivStyle] = useState( as CSSStyleDeclaration);

  useEffect(() => 
    if (divEl.current) 
      setDivStyle(divEl.current.style);
    
  , [divEl.current]);

  return (
    <div>
      <div ref=divEl className="test"></div>
      <pre>JSON.stringify(divStyle, undefined, 2)</pre>
    </div>
  );
;
export default IndexPage;

是因为 next.js s-s-r 还是我应该在依赖数组中添加一些东西？

代码沙箱here

【问题讨论】：

问题是你的样式是在那个test类中定义的，但是style属性只返回一个元素的内联样式，也就是style HTML属性中定义的样式.

@tromgy 谢谢你的回复。如果我想从元素中获取应用的样式数据怎么办？有可能吗？

【参考方案1】：

您可以使用 computed 样式来获得您需要的东西，尽管它不会是一个带有属性的“简单”对象。您需要单独查询每个属性：

if (divEl.current) 
      setDivStyle(getComputedStyle(divEl.current));
    

然后您可以执行以下操作：

divStyle.getPropertyValue("background-color")

这是一个演示它的example sandbox（来自你的）。