React 中的样式特定 HTML 标签答案

【问题标题】：Style Specific HTML tags in ReactReact 中的样式特定 HTML 标签
【发布时间】：2018-11-14 17:21:45
【问题描述】：

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

                <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',
},

没有错误，但它不起作用。

【问题讨论】：

你听说过样式化组件吗？它可以帮助你Styled-Components
我建议你使用Styled Components。

标签： javascript css reactjs react-redux

【解决方案1】：

create-react-app 在最新版本中支持 CSS 模块，请查看 ;)

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

Also Styled Components 是一个不错的选择。

【讨论】：

【解决方案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 样式都将应用于您的应用程序

【讨论】：

但这会改变所有其他表格，因为这是一个非常大的项目，我不能这样做。

【解决方案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>

【讨论】：

【解决方案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',
  },

【讨论】：

【解决方案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

【讨论】：

【解决方案6】：

为什么不迭代一个样式化的元素？

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

然后你调用所有的标题元素

<tr>{headerElements}</tr>

【讨论】：