Question

我本以为这对我来说很容易找到，但在任何地方都找不到。在HTML中，您可以像这样设置所有标签（标题，段落，img等）的样式：

<style>
  body {background-color: powderblue;}
  h1   {color: blue;}
  p    {color: red;}
</style>

我如何在React中做同样的事情？我想引用类中的所有p标签和一些custom标签。

Answer 1

反应如下。您可以使用样式道具应用inline styles并在反应background-color中使用backgrounColor。

要对所有p标签，h1标签和主体应用相同的样式，请使用相同的.css文件，然后将所有css样式放入.css文件中，并且必须将css文件导入父组件中，以便在.css文件将被应用。像下面这样

app.css

body {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}

App.js组件

 import "./app.css";//so the styles will be applied to body and all h1 and p tags as global

以下是react的一些内联样式示例注意：既不是字符串也不是HTML，它称为JSX，它是JavaScript的语法扩展。 Doc here

<body style={{backgroundColor: "powderblue"}}>
   <h1 style={{color: "blue"}}> </h1>
   <p style={{color: "red"}}></p>
 </body>

OR

render(){
   const style= {colorBlue: "blue", colorRed: "red"};

   return(
      <div>
         <h1 style={{color: style.colorBlue}}> </h1>
         <p style={{color: style.colorRed}}></p>
       </div>
   )
}

Answer 2

ReactJs只是一个JavaScript框架，可在HTML页面上“运行”。因此，如果要全局添加这些样式定义，则可以将其包含在主布局页面或容器页面的顶部，该页面包含“根”反应组件。

 <html>
 <head>
 <style>
    body {background-color: powderblue;}
    h1   {color: blue;}
    p    {color: red;}
</style>
<!-- your other css and javascript definitions, including probably react -->
</head>
<body>
    <MyReactComponent />
</body>
</html>

React的内部样式

2 个答案: