提示:本站收集StackOverFlow近2千万问答，支持中英文搜索，鼠标放在语句上弹窗显示对应的参考中文或英文， 本站还提供 中文繁体 英文版本 中英对照 版本，有任何建议请联系yoyou2525@163.com。
我有一张桌子，我正在尝试为其设置样式。 到目前为止，这就是我所做的：
<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',
},
没有错误，但是没有用。
create-react-app支持最新版本的CSS模块，请查看;）
https://facebook.github.io/create-react-app/docs/adding-a-css-modules-stylesheet
此外，样式化组件也是一个不错的选择。
避免使用内联样式。 而是在全局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样式都将应用于您的应用程序
定制功能组件怎么样？
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>
这是另一个建议：使用类设置样式：
<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',
},
我建议使用样式化的组件。 您可以定义类似
const TableHeader = styled.th`
border: '1px solid #dddddd',
padding: '8px',
`;
并像这样使用它：
<TableHeader></TableHeader>
<TableHeader>Canada</TableHeader>
....
这是入门链接https://www.styled-components.com/docs/basics#getting-started
为什么不遍历样式化的th元素呢？
headers = ['Canada', 'US', 'Total'];
const headerElements = headers.map(header => <th style={tstyle}>{header}</th>);
然后调用所有标头元素
<tr>{headerElements}</tr>
声明：本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.