React JS Cookie Banner样式优化求助：内联样式调整方案咨询

问题核心问题 #

你当前代码存在两个关键问题：

1. React元素的样式属性是style（单数），而非styles（复数），你的<p>标签用错属性名导致样式完全不生效
2. 缺少Banner整体内边距、按钮布局对齐、文本细节样式的针对性调整

修改后的完整代码 #

import CookieConsent from "react-cookie-consent";

<CookieConsent
  location="bottom"
  buttonText="Yes, I agree"
  cookieName="GLA"
  // Banner容器样式调整
  style={{ 
    background: "#262626",
    padding: "2.5rem 1.5rem",
    textAlign: "center",
    display: "flex",
    flexDirection: "column",
    gap: "1.2rem",
    margin: 0
  }}
  // 同意按钮样式调整
  buttonStyle={{ 
    background: "#3f7edf", 
    color: "#FFFFFF", 
    fontSize: "14px",
    padding: "0.7rem 1.8rem",
    borderRadius: "4px",
    border: "none",
    alignSelf: "center",
    cursor: "pointer"
  }}
  expires={150}
>
  {/* 标题文本样式修正 */}
  <p style={{ color: "#FFFFFF", fontSize: "18px", margin: 0 }}>
    We use cookies on this site to enhance your user experience
  </p>

  {/* 正文文本及链接样式修正 */}
  <p style={{ color: "#FFFFFF", fontSize: "14px", lineHeight: "1.6", margin: 0 }}>
    By clicking any link on this page you are giving your consent for us to set cookies. Detailed information, also on the right to withdraw consent, can be found in the{" "}
    <a 
      href="/" 
      target="_blank" 
      rel="noreferrer"
      style={{ color: "#3f7edf", textDecoration: "underline" }}
    >
      website's privacy policy.
    </a>
  </p>
</CookieConsent>

关键调整说明 #

• Banner容器：添加padding增加内部留白，用flex-direction: column+gap实现文本与按钮的垂直均匀分布，text-align: center确保所有内容居中对齐
• 同意按钮：用alignSelf: "center"让按钮在容器内水平居中，添加padding和borderRadius优化视觉手感，移除无效的justifyContent: "left"属性
• 文本元素：修正styles为React标准的style属性，调整字体大小和行高匹配目标效果，给隐私政策链接添加蓝色下划线样式
• 细节优化：移除所有冗余的margin，避免默认样式干扰布局

当前效果截图：

预期目标效果：

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