Question

我正在使用REACT BIG日历，我想访问我的函数之一中的css值。

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

const StyledCalendar = styled(Calendar);

例如，现在日历内部有一个div，其类别为“ 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

如果您知道类名称，则应该能够选择该名称并将该元素赋予getComputedStyle而不是为其赋予StyledCalendar。像这样：

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

（这假设页面上只有一个元素带有“ hello”类，否则您必须弄清楚您想要的元素在getElementsByClassName返回的节点列表中的位置）

如何从样式化的组件访问子代的css值？

2 个答案: