在 react 中修改 css 属性

Question

您好，我正在使用 CSS 网格创建一个动态表格组件。但我想修改 grid-template-columns css 属性。我知道如何在 CSS 中做到这一点。我正在使用重复来执行此操作。但是我想每次在反应中使用组件时都修改重复值。例如，如果我需要一个有 5 列的表，请使用 repeat(5, 1fr)，如果我想创建一个 3 列的表，则使用 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，您可以将列数设置为 prop，以便在每次使用该组件时动态选择其值（据我所知，这也有助于提高性能）。

代码如下所示：

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>