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

Question

I am using a REACT BIG CALENDAR and I want to get access to the css values in one of my functions.

I created a style component and override the library

const StyledCalendar = styled(Calendar);

Now for example there is a div inside of the Calendar with the class = "hello",

How would I access the css values of "hello" in a function? Similar to property lookup say in stylus.

I have tried window.getComputedStyle(elem, null).getPropertyValue("width") but this gives the css of the parent component.

getComputedStyle should work if you're giving it the right element. How are you selecting elem? — Steve Archer, Aug 17 '18 at 16:52
the elem i am giving it is StyledCalendar because thats the only componet i have access to in this class. I used refs, my question is how do i get those styles from the child components. I am overriding a RBC which is a library. — Azimi, Aug 17 '18 at 17:13

score 0 · Answer 1 · answered Aug 17 '18 at 17:07

You can do it using simple string interpolation, just need to be sure that className is being passed to Calendar's root element.

Like this:

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

Calendar component

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>
)

See more here.

score 0 · Accepted Answer · answered Aug 17 '18 at 18:09

0

If you know the class name, you should be able to select that and give that element to getComputedStyle instead of giving it StyledCalendar. Something like:

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

(this assumes that there's only one element with the class 'hello' on the page, otherwise you'll have to figure out where the one you want is in the node list that's returned by getElementsByClassName)

answered Aug 17 '18 at 18:09

Steve Archer

641
4
10

i appreciate the help alot! Is there anyway to do this with refs? thanks again – Azimi Aug 17 '18 at 18:25
You'd have to set a ref on the child component, but you said that you don't have access to it, so that would make it tough. If you're sure about the structure of the html inside the parent, you could take a ref to the parent and then use stuff like .children to navigate your way to the desired element, but that's a bit on the hacky side. – Steve Archer Aug 17 '18 at 18:33

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

2 Answers2