Question

我正在使用Material UI组件和MaterialTable，并且我想使用StyledComponents来修饰组件

但是当我尝试使用StyledComponents来应用样式时，却没有得到期望的结果

示例：

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组件时，没有应用样式。

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

import styled from 'styled-components'

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

我的自定义样式可以完美地发挥这种作用：

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

...问题是：是否有可能在不使用div来更改样式的情况下“改写”或更改样式？

Answer 1

为了使样式函数正常工作，组件必须将className属性传递给其子级。

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

与样式功能兼容的组件

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

无法使用样式化功能的组件

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

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

样式化的组件/ React-外部元素上的样式

1 个答案: