我正在使用 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
更改样式的情况下“覆盖”或更改样式?
最佳答案
组件必须将 className 属性传递给它们的子组件,以便 styled 函数起作用。
快速浏览一下,MaterialTable 不会这样做,因此样式化组件无法将另一个 css 类分配给表格。
与样式函数兼容的组件
const StyledFriendlyComp = ({className}) => <div className={className}>Styles being applied</div>
无法使用样式化函数的组件
const StyledFriendlyComp = () => <div>Styles not working</div>
在这种情况下,您需要用另一个元素(如 div)包装组件。
关于javascript - 样式化组件/React - 外部元素样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57499833/