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>