ReactJS 如何更改占位符颜色

在本文中，我们将探讨两种不同的方法来更改ReactJS中的占位符颜色。

要更改占位符文本的颜色，主要使用CSS的 ::placeholder 伪元素。这个方便的伪元素使我们能够在输入字段中样式化占位符文本。

语法

::placeholder {  
    color: yourColorValue;  
}

前提条件

React入门
React组件
ReactJS Hooks
NPM 或 NPX

创建React应用的步骤

步骤1：使用以下命令创建React应用

npx create-react-app placeholderApp

步骤2：创建项目文件夹，例如placeholderApp，使用以下命令导航到该文件夹：

cd  placeholderApp

项目结构

项目结构如下所示。

ReactJS 如何更改占位符颜色

方法1：使用CSS样式

在这个方法中，使用内联<style>将占位文本的颜色设置为 crimson。结果是一个居中的输入框，带有绿色的标题和 crimson 的占位符颜色。

示例： 这个示例演示了上述方法的使用。

// App.js file 
  
import React from "react"; 
const App = () => { 
    const containerStyle = { 
        display: "flex", 
        flexDirection: "column", 
        alignItems: "center", 
        marginTop: "20px", 
    }; 
  
    const titleStyle = { 
        fontSize: "24px", 
        color: "green", 
    }; 
    const inputStyle = { 
        width: "250px", 
        height: "40px", 
        padding: "10px", 
        fontSize: "16px", 
        border: "2px solid green", 
        borderRadius: "15px", 
        outline: "none", 
    }; 
  
    return ( 
        <div style={containerStyle}> 
            <h2 style={titleStyle}>Geeksforgeeks</h2> 
            <input 
                type="text"
                placeholder="Enter your text here"
                style={inputStyle}/> 
                  
            {/* Styling for the placeholder color */} 
            <style> 
                {` 
                    ::placeholder { 
                        color: crimson; 
                    }` 
                } 
            </style> 
        </div> 
    ); 
}; 
  
export default App;

运行步骤：

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

npm start

输出 :

ReactJS 如何更改占位符颜色

方法2：使用条件渲染

在修改React中占位文本颜色的方法中，我们使用状态来追踪一个条件（例如，按钮点击）。根据这个条件，我们动态地为输入元素分配一个CSS类，从而改变占位文本的颜色。

示例： 这个示例展示了上面解释的方法的使用。

// App.js 
  
import React, { useState } from "react"; 
import "./App.css"; // Import your CSS file 
  
const App = () => { 
    const [isRed, setIsRed] = useState(false); 
  
    const togglePlaceholderColor = () => { 
        setIsRed(!isRed); 
    }; 
  
    return ( 
        <div className="container"> 
            <h2 className="heading">Geeksforgeeks</h2> 
            <input 
                type="text"
                placeholder="Enter your text here"
                className={`input ${ 
                    isRed ? "red-placeholder" : ""
                }`}/> 
                  
            <button 
                className="button"
                onClick={togglePlaceholderColor}> 
                Toggle Placeholder Color 
            </button> 
        </div> 
    ); 
}; 
  
export default App;

CSS

/* App.css file*/
  
.container { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    margin-top: 20px; 
} 
  
.heading { 
    font-size: 34px; 
    color: green; 
} 
  
.input { 
    width: 250px; 
    height: 40px; 
    padding: 10px; 
    font-size: 16px; 
    color: #333; 
    border: 2px solid green; 
    border-radius: 15px; 
    outline: none; 
} 
  
.red-placeholder::placeholder { 
    color: red; 
} 
  
.button { 
    padding: 10px 20px; 
    font-size: 16px; 
    border: none; 
    border-radius: 5px; 
    outline: none; 
    cursor: pointer; 
    background-color: #0074d9; 
    color: #fff; 
    margin-top: 10px; 
} 
  
.red-button { 
      /* Red button color when condition is met */
    background-color: red;  
}

输出:

ReactJS 如何更改占位符颜色