React中如何给标签添加星号并为其设置独立CSS样式？

方案1：直接在label中嵌入带样式的JSX元素 #

如果你的TextField组件支持传入JSX作为label属性（绝大多数现代React组件都支持，包括Material-UI的TextField），可以直接把星号用<span>包裹并单独设置颜色：

<TextField className="sign-up-input-field"
           value={loginId}
           placeholder="Enter Login ID"
           label={
             <>
               Login ID <span style={{ color: 'red' }}>*</span>
             </>
           }
           handleChange={
               (e) => {
                   if (e.target.value) 
                       setShowEmptyFieldError(false)
                   
                   setIsLoginPage(true);
                   setLoginId(e.target.value)
               }
           }
           id="prospect-sign-in-login-id-input"
           type="number"
           
           labelStyles={
               {
                   fontFamily: "Roboto",
                   fontStyle: "normal",
                   display: "block",
                   fontWeight: "400",
                   fontSize: "16px",
                   lineHeight: "24px",
                   letterSpacing: "0.03em",
                   color: "#312126"
               }
           }/>

这种方式直观直接，通过内联样式单独控制星号颜色，完全不影响标签其他文字的原有样式。

方案2：使用CSS伪元素生成星号（无需修改JSX结构） #

如果组件不支持JSX类型的label，或者你更倾向于用CSS控制样式，可以移除label中的手动星号，通过CSS伪元素添加带颜色的星号：

1. 先修改label属性为纯文本：

label="Login ID"

2. 添加对应的CSS样式：

.sign-up-input-field label::after {
  content: '*';
  color: red;
  margin-left: 4px; /* 可根据需求调整星号与文字的间距 */
}

这种方式不需要改动JSX的label结构，通过CSS自动在标签末尾添加红色星号，保持代码结构简洁。

内容的提问来源于stack exchange，提问作者Ritika