React中不使用CSS仅通过.js文件能否配置文本/背景颜色

完全可以，不需要引入任何.css文件，仅靠JS文件就能完成文本色、背景色在内的所有样式配置，React生态里有成熟的方案支持这类需求，常用的实现方式如下：

• 原生行内样式（零额外依赖）
  React 原生支持给DOM元素传递style属性，属性值为驼峰命名的JavaScript对象，直接在组件逻辑里定义即可，不需要单独创建样式文件。注意这里的style接收的是标准JS对象，属性名要用驼峰格式，不能直接写CSS里的横杠命名语法。

基础静态样式示例：

function StaticColorBlock() {
  // 直接在JS中定义样式配置
  const blockStyle = {
    color: '#1677ff', // 文本颜色
    backgroundColor: '#e6f4ff', // 背景色，注意属性名用驼峰写法，和CSS的kebab-case区分
    padding: '16px 24px',
    borderRadius: 6
  }
  return <div style={blockStyle}>纯JS控制的彩色文本块</div>
}

如果需要动态修改颜色，直接把样式属性和组件状态绑定即可，比修改CSS类更直观：

import { useState } from 'react'

function DynamicColorBlock() {
  const [active, setActive] = useState(false)
  const blockStyle = {
    color: active ? '#ffffff' : '#389e0d',
    backgroundColor: active ? '#52c41a' : '#f6ffed',
    padding: '20px',
    cursor: 'pointer'
  }

  return (
    <div style={blockStyle} onClick={() => setActive(!active)}>
      点击切换颜色状态，当前为{active ? '激活' : '默认'}态
    </div>
  )
}

• CSS-in-JS 方案（适配复杂项目场景）
  如果项目样式逻辑复杂，需要样式隔离、全局主题、嵌套规则、伪类/媒体查询支持这类能力，可以选择CSS-in-JS类工具，所有样式规则全部写在JS/JSX文件中，全程不需要创建.css文件。这类工具会在编译或运行阶段自动把JS中写的样式插入到页面的全局style标签中，最终渲染效果和外部CSS完全一致，配置文本、背景色这类基础属性没有任何兼容问题。

小提示：原生行内样式不支持伪类、媒体查询、keyframes这类复杂CSS能力，如果只是做文本、背景色的添加和修改完全够用，有复杂样式需求再引入CSS-in-JS方案即可，两类方案都可以做到零.css文件开发。

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