在 react 中修改 css 属性

Question

您好，我正在使用 css 网格创建动态 table 组件。但是我想修改 grid-template-columns css 属性。我知道如何在 css 中做到这一点。我正在使用重复来做到这一点。但是每次在react中使用组件的时候我都想修改repeat值。例如，如果我需要一个有 5 列的 table，y 使用 repeat(5, 1fr)，如果我想创建一个 3 列 table，我使用 repeat(3, 1fr).

<div className="xx-table">
    <div className="xx-table-header">
        <div className="xx-table-row">
            <div className="xx-table-data">Title1</div>
            <div className="xx-table-data">Title2</div>
            <div className="xx-table-data">Title3</div>
            <div className="xx-table-data">Title4</div>
            <div className="xx-table-data">Title5</div>
        </div>
    </div>
    <div className="xx-table-body">
        <div className="xx-table-row">
            <div className="xx-table-data">Data1</div>
            <div className="xx-table-data">Data2</div>
            <div className="xx-table-data">Data3</div>
            <div className="xx-table-data">Data4</div>
            <div className="xx-table-data">Data5</div>
        </div>
        <div className="xx-table-row">
            <div className="xx-table-data">Data6</div>
            <div className="xx-table-data">Data7</div>
            <div className="xx-table-data">Data8</div>
            <div className="xx-table-data">Data9</div>
            <div className="xx-table-data">Data10</div>
        </div>
    </div>
</div>

还有 css

xx-table-row {
    display: grid;
    grid-template-columns: repeat(5, minmax(100px, 1fr));
}

我不知道该怎么做。我不知道内联样式是方法还是我不知道的任何其他方法

Answer 1

你应该看看 styled-components。

通过styled-components，您可以将列数设置为一个属性，以便在您每次使用该组件时动态选择它的值（据我所知，它在性能方面也有帮助）。

代码如下所示：

import styled from 'styled-components'

const StyledRow = styled.div`
  display: grid;
  grid-template-columns: ${props => `repeat(${props.columns}, minmax(100px, 1fr))`};
`

// in the component
<StyledRow columns={5}>
    // ideally, style these with styled-components as well
    <div className="xx-table-data">Data1</div>
    <div className="xx-table-data">Data2</div>
    <div className="xx-table-data">Data3</div>
    <div className="xx-table-data">Data4</div>
    <div className="xx-table-data">Data5</div>
</StyledRow>

在 react 中修改 css 属性

Modify css Property in react

css

sass

reactjs