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

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

-- Create the maximum number of words we want to pick (indexes in n)
with recursive n(i) as (
    select
        1 i
    union all
    select i+1 from n where i < 1000
)
select distinct
    s.id,
    s.oaddress,
    -- n.i,
    -- use the index to pick the nth word, the last words will always repeat. Remove the duplicates with distinct
    if(instr(reverse(trim(substring_index(s.oaddress,' ',n.i))),' ') > 0,
        reverse(substr(reverse(trim(substring_index(s.oaddress,' ',n.i))),1,
            instr(reverse(trim(substring_index(s.oaddress,' ',n.i))),' '))),
        trim(substring_index(s.oaddress,' ',n.i))) oth
from 
    app_schools s,
    n

然后：

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

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>

React中特定于样式的HTML标签

6 个答案: