React组件中customStyles未被读取且样式不生效问题求助

核心原因：模板字符串语法错误 #

你当前在className中使用了单引号包裹字符串，而ES6模板字符串的变量插值${}只能在**反引号（）**中生效。单引号里的${customStyles}`会被浏览器当作普通文本解析，既不会插入实际的样式类名，也因为代码里没真正用到这个变量，触发了未使用变量的提示。

修复代码 #

把className的单引号替换成反引号即可：

import React from 'react'

const CustomButton = ({ type, title, customStyles, handleClick }) => { 
  return (
    <button
        type={type || 'button'}
        className={`px-2 py-1.2 flex-1 rounded-md ${customStyles}`}
        onClick={handleClick}
    >
        {title}
    </button>
  )
}

export default CustomButton

额外优化建议 #

• 给type设置默认值button，避免在表单场景下按钮默认触发提交行为
• 若可能存在customStyles未传入的情况，可以加个空值判断，避免className出现多余空格：

  className={`px-2 py-1.2 flex-1 rounded-md ${customStyles || ''}`}
  

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