React中特定于样式的HTML标签

Question

我有一张桌子，我正在尝试为其设置样式。 到目前为止，这就是我所做的：

                <tr>
                    <th> </th>
                    <th style={tstyle}>Canada</th>
                    <th style={tstyle}>US</th>
                    <th style={tstyle}>Total</th>
                </tr>

接着：

const tstyle = {
border: '1px solid #dddddd',
padding: '8px',
};

这可以正常工作，但是我敢肯定，这是一种更好的方法，而无需重复style={tstyle} 。 我尝试这样做：

const styles = () => createStyles({
th: {
    color: 'blue',
},

没有错误，但是没有用。

Answer 1

create-react-app支持最新版本的CSS模块，请查看;）

https://facebook.github.io/create-react-app/docs/adding-a-css-modules-stylesheet

此外，样式化组件也是一个不错的选择。

Answer 2

避免使用内联样式。 而是在全局CSS文件中添加以下CSS样式

将id设置为tr元素

            <tr id="tr">
                <th> </th>
                <th>Canada</th>
                <th>US</th>
                <th>Total</th>
            </tr>

例如：app.css文件

  #tr > th{
       border: '1px solid #dddddd';
       padding: '8px';
  }

如果有其他样式替代样式，则设置为“重要”

  #tr > th{
       border: '1px solid #dddddd !important';
       padding: '8px !important';
  }

因此，无论您使用哪种元素，此CSS样式都将应用于您的应用程序

Answer 3

定制功能组件怎么样？

const style = {
border: '1px solid #dddddd',
padding: '8px',
};
const StyledTh = ({children: text}) => <th style={style}>{text}</th>

用法：

                <tr>
                    <th></th>
                    <StyledTh>Canada</StyledTh>
                    <StyledTh>US</StyledTh>
                    <StyledTh>Total</StyledTh>
                </tr>

Answer 4

这是另一个建议：使用类设置样式：

                    <tr>
                    <th> </th>
                    <th className={classes.tableCell} >Canada</th>
                    <th className={classes.tableCell}>US</th>
                    <th className={classes.tableCell}>Total</th>
                    </tr>

接着：

tableCell: {
    border: '1px solid #dddddd',
    padding: '8px',
  },

Answer 5

我建议使用样式化的组件。 您可以定义类似

const TableHeader = styled.th`    
      border: '1px solid #dddddd',
      padding: '8px',
    `;

并像这样使用它：

<TableHeader></TableHeader>
<TableHeader>Canada</TableHeader>
....

这是入门链接https://www.styled-components.com/docs/basics#getting-started

Answer 6

为什么不遍历样式化的th元素呢？

headers = ['Canada', 'US', 'Total'];
const headerElements = headers.map(header => <th style={tstyle}>{header}</th>);

然后调用所有标头元素

<tr>{headerElements}</tr>