Styled Components / React - Style on external element

Question

I'm using Material UI components and MaterialTable and I want to stylish the components using StyledComponents

But I not been having the desired results when I try to apply styles using StyledComponents

CodeSandBox Online Example

Example:

import styled from 'styled-components'
import MaterialTable from "material-table";

export const MaterialTableStyled = styled(MaterialTable)`
    /* STYLE FOR FILTER ROW */
    tbody > .MuiTableRow-root:first-child {
        background-color: #F1F3F4 !important;
    }
`

When I use the MaterialTableStyled component no applied the style.

Instead, if I use a div on my StyledComponent:

import styled from 'styled-components'

export const MaterialTableStyled = styled.div`
    /* STYLE FOR FILTER ROW */
    tbody > .MuiTableRow-root:first-child {
        background-color: #F1F3F4 !important;
    }
`

My custom styles work perfecty on that way:

<MaterialTableStyled> // DIV WITH STYLES
    <MaterialTable
        // ALL PROPS AND STUFFS
    />
</MaterialTableStyled>

...the question is: it's possible "override" or change styles without using the div to change the style?

Answer 1

A component has to pass the className property into their children in order styled function to work.

From a quick look, MaterialTable doesn't do that, as a result styled components can't assign another css class to the table.

Component compatible with styled function

const StyledFriendlyComp = ({className}) => <div className={className}>Styles being applied</div>

Component that won't work with styled function

const StyledFriendlyComp = () => <div>Styles not working</div>

In this cases you need to wrap the component with another element like div.