如何从带样式的组件访问子项的 css 值？

Question

我正在使用 REACT BIG CALENDAR，我想在我的一个函数中访问 css 值。

我创建了一个样式组件并覆盖了库

const StyledCalendar = styled(Calendar);

例如，现在日历中有一个 div，其中 class = "hello",

如何在函数中访问 "hello" 的 css 值？类似于属性在手写笔中查找说。

我试过window.getComputedStyle(elem, null).getPropertyValue("width")，但这给出了父组件的css。

Answer 1

您可以使用简单的字符串插值来做到这一点，只需要确保 className 被传递到 Calendar 的根元素。

像这样：

const StyledCalendar = styled(Calendar)`
    .hello {
       color: red;
    }
`

日历组件

const Calendar = props => (

    // I don't know exact how this library is structured
    // but need to have this root element to be with className from props 
    // if it's possible to pass it like this then you can do it in this way
    <div className={props.className}>
       ...
       <span className="hello"> Hello </span>
       ...
    </div>
)

查看更多here.

Answer 2

如果您知道 class 名称，您应该能够 select 并将该元素提供给 getComputedStyle 而不是提供 StyledCalendar。类似于：

const childElement = document.getElementsByClassName('hello')[0];
const childWidth = getComputedStyle(childElement).getPropertyValue('width');

（假设页面上只有一个元素带有 class 'hello'，否则您将不得不弄清楚您想要的元素在返回的节点列表中的位置getElementsByClassName)

如何从带样式的组件访问子项的 css 值？

How to get access to the children's css values from a styled component?

css

node-modules

reactjs

styled-components

react-big-calendar