繁体   English   中英

React中特定于样式的HTML标签

Style Specific HTML tags in React

提示:本站收集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',
},

没有错误,但是没有用。

6 个回复

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>
1 在React中加载特定于设备的样式

我有一个应用程序,其中我在移动设备和台式机上使用了不同的视图,而不是进行响应式设计。 我正在为我的应用程序使用服务器端渲染。 这是浏览器启动文件的代码 import React from "react"; import App from "../shared/App"; import ...

2 EmotionJS-React-全局样式覆盖特定于组件的样式

我具有如下定义的全局样式: 和一个按钮定义为: 我的期望是,如果我通过blue的backgroundColor ,那么按钮实际上是蓝色的,并且字体大小为24px 。 基本上,我希望特定于组件的样式优先于全局样式。 但是渲染按钮应用了以下样式: 我想念什么? 我可以head看到全局规则是 ...

4 Joomla中特定于类别的CSS样式?

关于将样式应用于文章类别(类别或其他任何东西)的好方法的任何想法? 目前,我手动创建了第一篇文章,将其包装在一个范围内: 然后我将文章粘贴到JCK编辑器中,并在模板目录中有一个新的css文件来处理class foo 。 这不能很好地工作,因为JCK编辑器将span类移动到内部 ...

5 Flex中特定于ID的CSS样式

我试图根据某些逻辑更改TabNavigator中几个标签的边框颜色。 我正在以下答案的帮助下: 在Flex中运行时更改选项卡边框颜色 但是现在,所有带有“ MyTabs”类的选项卡的边框颜色都在更改。 我想将其指定给带有特定ID的少数标签。 我试过它只能通过其ID访问一个标 ...

6 Highchart中特定于样式的数据元素

如果我想专门针对其中一个数据元素(例如,point.y)使用某种样式而没有其他元素,那么我将如何去做呢? jsfiddle 如果您想查看我在做什么,我想定位到point.y,当您单击其中的一部分时,point.y会与point.subtotal和point.name,point.y ...

9 如何应用特定于html文件的外部CSS样式?

我有5个html文件和1个css文件。当我将此外部css链接到所有html文件时,所有样式都将应用于所有文件。 但是我只想使用几种样式,如何制作呢? 例如: 在这里,所有的html文件都将使用正文样式,并且显示了不需要的背景。请让我知道如何解决此问题。 ...

2016-03-07 06:55:02 0 52   html/ css
10 如何在 React 中为 html 标签编写内联样式?

我想从顶级组件设置标题标签样式,如下所示: 'test' 有一个红色背景,我不能这样做,因为在我的用例中我得到一个 JSX 元素作为一个包含 h2 元素的变量,我不能强调足够的顶部示例过于简化和在实际用例中,我无法以任何明显的方式访问 h2 标签,我必须执行诸如 {props.children ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM