reactjs - From parent component give style to child customized component in styled component

Question

TodoListContainer is a styled component, So Inside this container, I would like to give style to the Footer component which I import from other places. My goal is to access different Footer inside TodoListContainer and give different CSS styles. It is straightforward to access the regular dom element, I have a hard time accessing customized component.

Thanks for the help!

const TodoListContainer = styled.div`
`

  <TodoListContainer>
            <input
                className=" task-input"
                aria-label="Create a new todo..."
                type="text"
                value={text}
                placeholder="Create a new todo..."
                onChange={handleChange}
                onKeyDown={handleKeyDown}
            />
            <ul>
                {renderedListItems}
                <li className="footer-section">
                    <span className="itemInfor">
                        {todosRemaining} item{suffix} left
                    </span>

                    <Footer />
                    <button
                        aria-label="Clear Completed"
                        className="clear-all-btn"
                        onClick={handleClearComplete}>
                        Clear Completed
                    </button>
                </li>
            </ul>
            <Footer />
        </TodoListContainer>

question from:https://stackoverflow.com/questions/65836449/from-parent-component-give-style-to-child-customized-component-in-styled-compone

Answer 1

Waitting for answers