如何在ReactJS中设置文本颜色

在本文中，我们将看到多种技术来有效地设置React应用程序中的文本颜色。 React 是一种广泛认可的JavaScript库，为开发人员提供了创建交互式和动态用户界面的能力。在这些界面中，文本颜色的选择非常重要，因为它能增强用户的视觉吸引力和参与度。样式在网络开发中起着核心作用，它显著影响应用程序的整体美学和用户体验。修改文本颜色是样式的基本方面之一。

先决条件

React介绍
React Hooks
NPM或NPX

创建React应用程序的步骤

步骤1：通过以下命令创建一个React应用程序

npx create-react-app <<My-Project>>

步骤2：在创建项目文件夹后，即text-color-app，使用以下命令导航到该文件夹：

cd  <<My-Project>>

项目结构：

如何在ReactJS中设置文本颜色

方法1：基本的CSS和JS

第一种方法是利用传统的CSS和JavaScript来建立预定的文本颜色。这是通过开发一个与特定CSS类关联的React组件来实现的。

示例： 该示例定义了一个名为TextColorComponent的React组件。该组件通过导入一个style.css文件来应用CSS样式。它创建了一个视觉上吸引人的居中容器，其中包含一个鲜艳的绿色标题和一个紫红色的文本块。

App.js文件
style.css

// App.js 
import React from 'react'; 
import './style.css'; // Import the CSS file 
const App = () => { 
    return <> 
        <div className="container"> 
            <h1 className="heading"> 
                Geeksforgeeks 
            </h1> 
            <div className="text-color"> 
                A Computer Science portal for 
                geeks. It contains well written,  
                well thought and well explained 
                computer science and programming  
                articles 
            </div> 
        </div> 
    </>; 
}; 
export default App;

CSS

/* style.css */
.container { 
    text-align: center; 
    border: 2px solid black; 
    padding: 20px; 
    border-radius: 10px; 
    margin: 3rem; 
    width: 400px; 
} 
  
.heading { 
    color: green; 
    font-size: 40px; 
  
} 
  
/* Setting Text Color */
.text-color { 
    color: crimson; 
    /* Set the desired color */
    font-size: 20px; 
}

运行步骤：

要打开应用程序，请使用终端并输入下面列出的命令。

npm start

输出 :

如何在ReactJS中设置文本颜色

方法2：动态变换颜色

在第二个方法中，引入了交互性来操作文本颜色。通过利用React的状态管理，一个按钮使用户可以在黑色和绿色之间切换。这种交互触发了内联样式的颜色属性的动态变化，并展示了React组件根据用户操作改变文本颜色的能力。通过利用React的useState钩子，组件有效地管理一个状态，当点击按钮时，在黑色和红色之间切换。此外，组件的美观通过在一个名为styles的JavaScript对象中定义的内联样式得到增强。

示例：

App.js文件

import React, { useState } from 'react'; 
  
const App = () => { 
    const [textColor, setTextColor] = useState('black'); 
  
    const handleColorChange = () => { 
        const newColor = textColor === 'black' ? 'red' : 'black'; 
        setTextColor(newColor); 
    }; 
  
    const styles = { 
        container: { 
            textAlign: 'center', 
            margin: '50px auto', 
            padding: '20px', 
            border: '2px solid #333', 
            borderRadius: '5px', 
            backgroundColor: '#f5f5f5', 
            maxWidth: '600px', 
        }, 
        heading: { 
            color: '#333', 
        }, 
        colorButton: { 
            backgroundColor: '#4caf50', 
            color: 'white', 
            border: 'none', 
            padding: '10px 20px', 
            cursor: 'pointer', 
            borderRadius: '5px', 
            fontSize: '16px', 
            marginTop: '20px', 
        }, 
        colorButtonHover: { 
            backgroundColor: '#45a049', 
        }, 
        content: { 
            fontSize: '18px', 
            marginTop: '30px', 
        }, 
    }; 
  
    return ( 
        <div style={styles.container}> 
            <h1 style={styles.heading}> 
                Geeksforgeeks 
            </h1> 
            <button 
                style={styles.colorButton} 
                onMouseEnter={(e) =>  
                e.target.style.backgroundColor = styles.colorButtonHover.backgroundColor} 
                onMouseLeave={(e) =>  
                e.target.style.backgroundColor = styles.colorButton.backgroundColor} 
                onClick={handleColorChange} 
            > 
                Change Text Color 
            </button> 
            <div style={{ ...styles.content,  
                         color: textColor }}> 
                A Computer Science portal for geeks.  
                It contains well written, well 
                thought and well explained computer  
                science and programming articles. 
            </div> 
        </div> 
    ); 
}; 
  
export default App;

输出 :

如何在ReactJS中设置文本颜色