如何在 ReactJS 中使用样式？

React 是一个 Javascript 前端库，用于构建单页应用程序 (SPA)。通过将样式分配给 className 属性，可以轻松地为 React 应用程序设置样式。

有多种方法可以设置 React 应用程序的样式。在本文中，我们将讨论以下四种设置 React 应用程序样式的方法。

1. 使用内联样式
2. 使用 CSS 文件
3. 使用 CSS 模块
4. 使用样式组件

项目设置——我们可以在命令行中使用下面提到的命令来创建 React 应用程序。

npx create-react-app name_of_the_app

注意：为了跟随示例，请删除 App.js 和 App.css 文件的所有内容。

使用内联样式进行样式设置——为了将内联样式应用于元素，我们使用 style 属性。我们传递一个对象，其中 key 作为 CSS 属性在 camelCase 中， value 作为可以分配给这些 CSS 属性的值。

语法：将内联样式分配给 CSS 元素的语法如下所述。

文件名：App.js App.js 文件的内容在下面给出的代码中提到，其中我们为 React 元素添加了内联样式。

App.js

const App = () => {
  return (
    

      
GeeksForGeeks
    
  );
};
  
export default App;

运行应用程序的步骤：使用以下命令启动应用程序。

npm start

输出：打开浏览器并转到http://localhost:3000 ，您将看到以下输出。

注意：对于下面给出的所有示例，输出将仅保持如上。虽然您可以通过粘贴 App.js 和 App.css 文件的内容并在您的设备上运行 React 应用程序来验证它。

使用 CSS 文件设置样式——要使用 CSS 文件设置 React 元素的样式，我们首先导入 CSS 文件，然后将 CSS 文件中包含的类分配给 React 元素的 className 属性。

语法：将类分配给 className 属性的语法如下所述。

文件名：App.js App.js 和 App.css 文件的内容展示了使用 CSS 文件来设置 React 元素样式的内容如下所述。

应用程序.js

import './App.css';
  
const App = () => {
  return (
    

      
GeeksForGeeks
    
  );
};
  
export default App;

应用程序.css

.container-div {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background-image: linear-gradient(
          to right, #427ceb, #1dad6f);
}
  
.heading {
    color: white;
}

使用 CSS 模块进行样式设置 – CSS 模块是一种在本地限定 CSS 文件内容的方法。我们可以通过将 CSS 文件命名为 App.modules.css 来创建一个 CSS 模块文件，然后可以使用下面提到的特殊语法将其导入 App.js 文件中。

句法：

import styles from './App.module.css';

现在我们可以轻松地将类分配给下面提到的 className 属性。

 
    
GeeksForGeeks

方括号用于访问包含连字符的类，或者我们通常也可以使用它。当它不包含连字符时，点可用于访问类。

文件名：App.js App.js 和 App.css 文件的内容展示了如何使用 CSS 模块来设置 React 元素的样式，如下所述。

应用程序.js

import styles from './App.module.css';
  
const App = () => {
  return (
    

      
GeeksForGeeks
 
    
  );
};
  
export default App;

应用程序.modules.css

.container-div {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background-image: linear-gradient(
          to right, #427ceb, #1dad6f);
}
  
.heading {
    color: white;
}

使用 styled-components 进行样式设置 - styled-components 是一个第三方包，可帮助我们根据提供给它的 React 元素和 CSS 样式创建一个新的 Styled 组件。

模块安装：为了使用样式组件，您必须首先使用命令行中的以下命令将其安装为依赖项。

npm install styled-components

语法：要创建样式组件，您可以使用下面提到的语法。

import styled from 'styled-components';
const GeeksHeading = styled.h1`
  color: white;
`;

上面的代码将基于 h1 元素创建一个新组件，并使用传递给它的 CSS 属性对其进行样式设置。 App.js 文件的内容演示了 styled-components 的使用，如下所述。

应用程序.js

import styled from 'styled-components';
  
const PageDiv = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-image: linear-gradient(
      to right, #427ceb, #1dad6f);
`;
  
const GeeksHeading = styled.h1`
  color: white;
`;
  
const App = () => {
  return (
    
      GeeksForGeeks
    
  );
};
  
export default App;