React js教程：React 中的样式和 CSS（9）

import React from 'react';  
import logo from './logo.svg';  
import './App.css';  
import UserForm from "./components/UserForm";  
  
function App() {  
       return (  
              <div className="App">  
                     <header>  
                            <img src={logo} className="App-logo" alt="logo" />   
                     </header>  
                     <UserForm></UserForm>  
              </div>  
       );  
}  
  
export default App;  

这将显示如下输出，

与 React 中的样式和 CSS 相关的常见问题解答，

如何在 React 的组件中添加 CSS 类？

在 React 中，我们可以将 prop 作为 className 传递给元素，以在 camelCase 中定义 CSS 类。

<p className=”error”>Error</p>  

可以在 React 组件中使用内联样式吗？在组件中使用哪种技术更好？

是的，内联样式可以在 React 中使用。但是使用内联样式并不比 React 更可取。使用 CSS 类在性能方面比内联样式更好。

哪些浏览器支持样式化组件？

样式组件由以下支持，

Chrome 和 edge 被称为 Evergreen 浏览器，因为它们可以在不依赖于需要安装的操作系统的情况下进行更新。

为什么不应该在 render() 方法中声明样式组件？

在组件的 render() 方法中声明样式组件时，React 会在每次渲染时重新编译 DOM 子树的那部分，而不是仅仅观察前一个节点的变化。这将导致性能和行为问题。因此，最好在组件定义上方使用样式化组件。

例子：

不应该使用下面的代码，因为每次渲染组件时只考虑更改。

const User = () => {  
    const Button = `  
        color: black;  
        background-color: white;  
    `  
  
    return(  
        <div>  
            <button>Click Me</Button>  
        </div>  
    )  
}  

const Button = `  
      color: black;  
      background-color: white;  
`  
  
const User = () => {  
      return(  
            <div>  
                  <button>Click Me</Button>  
            </div>  
      )  
}