样式化的组件/React-外部元素上的样式 [英] Styled Components / React - Style on external element

问题描述

我正在使用材料UI 组件和 StyledComponents

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

但是当我尝试使用StyledComponents来应用样式时，却没有达到预期的效果

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

CodeSandBox在线示例

示例:

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;
    }
`

当我使用 MaterialTableStyled 组件时，未应用样式.

When I use the MaterialTableStyled component no applied the style.

相反，如果我在StyledComponent上使用 div :

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>

...问题是:是否有可能在不使用 div 更改样式的情况下覆盖"或更改样式?

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

推荐答案

组件必须将className属性传递给其子元素，以使样式化函数起作用.

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

快速浏览一下，MaterialTable并没有这样做，因为样式化的组件无法将另一个CSS类分配给表.

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

与样式函数兼容的组件

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>

在这种情况下，您需要使用诸如div之类的另一个元素来包装组件.

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

这篇关于样式化的组件/React-外部元素上的样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！