React JS自定义CSS实现Cookie Banner样式问题求助

直接给你调整后的代码，主要通过CSS Flex布局实现内容与按钮的左右分布，同时优化间距、排版和样式细节：

修改后的JS代码（结构微调，便于布局控制） #

import React from "react";
import { withWidth } from "@material-ui/core";
import style from './Cookie.module.css';

function Cookies(props) {
    return (
        <React.Fragment>
            <div ref={props.forwardedRef}>
                <div className={style.cookies}>
                    <div className={style.content}>
                        <div className={style.textContainer}>
                            <p className={style.header}>We use cookies on this site to enhance your user experience</p>
                            <p className={style.message}> 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">website's privacy policy.</a></p>
                        </div>
                        <div className={style.click}>
                            <button className={style.button}>
                                Yes I agree
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </React.Fragment>
    )
}
export default withWidth()(Cookies);

修改后的CSS代码 #

.cookies {
  background-color: #333;
  position: fixed;
  bottom: 0;
  width: 100%;
  padding: 1.5rem 2rem; /* 避免内容贴边，添加合理内边距 */
  box-sizing: border-box; /* 确保padding不会撑宽容器 */
}

.content {
  display: flex; /* 用Flex实现左右分栏布局 */
  align-items: center; /* 垂直方向居中对齐 */
  justify-content: space-between; /* 文本区与按钮区两端对齐 */
  max-width: 1200px; /* 可选：限制最大宽度，大屏下布局更紧凑 */
  margin: 0 auto; /* 让内容块居中 */
}

.textContainer {
  flex: 1; /* 让文本区域占满剩余空间 */
  margin-right: 2rem; /* 和按钮保持间距 */
}

.header {
  color: #FFFFFF;
  font-size: 20px;
  margin: 0 0 0.5rem 0; /* 仅保留底部间距，排版更紧凑 */
  font-weight: 600; /* 标题加粗，匹配目标样式 */
}

.message {
  color: #FFFFFF;
  font-size: 16px;
  margin: 0; /* 清除默认外边距 */
  line-height: 1.5; /* 优化行高，提升可读性 */
}

/* 统一链接样式 */
.message a {
  color: #3f7edf; /* 与按钮同色的蓝色 */
  text-decoration: underline;
}

.message a:hover {
  text-decoration: none; /* hover时去掉下划线，增强交互感 */
}

.button {
  background-color: #3f7edf;
  color: #FFFFFF;
  font-size: 13px;
  padding: 0.8rem 1.5rem; /* 用padding控制按钮大小，比固定宽高更灵活 */
  border-radius: 5px;
  border: none; /* 清除默认边框 */
  cursor: pointer; /* 鼠标悬停显示手型 */
  font-weight: 500;
}

.button:hover {
  background-color: #2d6bc6; /* hover时加深颜色，提供交互反馈 */
}

关键改动说明： #

• 用Flex布局替代原流式布局，实现文本与按钮的左右分栏，匹配目标样式结构
• 统一内边距和外边距，避免内容贴边，提升整体排版紧凑度
• 优化链接颜色与交互效果，和按钮风格保持统一
• 按钮改用padding控制尺寸，适配不同屏幕，同时添加hover反馈
• 添加box-sizing: border-box确保容器宽度不会被padding撑开
• 可选的最大宽度和居中处理，让大屏下的布局更美观

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