使用 React JS 和自定义 CSS 创建 Cookie 横幅

你好，我对Js的react 是新的，我对css和挣扎的react 不是很好.

我正在try 实现一个基本的Cookie横幅设计. 以下是我到目前为止所try 的全部代码

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}>
                        <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 className={style.click}>
                            <button className={style.button}>
                                Yes I agree
                            </button>
                        </div>

                    </div>

                </div>

            </div>
        </React.Fragment >
    )
}
export default withWidth()(Cookies);

Css:以下内容:

.cookies {
  overflow: hidden;
  background-color: #333;
  position: fixed;
  bottom: 0;
  width: 100%;
}

.content {

  padding-left: 100px;
  padding-top: 5px;
}

.header {
  color: #FFFFFF;
  font-size: 20px;
}

.message {
  color: #FFFFFF;
  font-size: 16px;
}

.click {
  left: 0;
}

.button {
  background-color: #3f7edf;
  color: #FFFFFF;
  font-size: 13px;
  height: 50px;
  width: 100px;
  border-radius: 5px;
  border-color: #3f7edf;
}

我try 添加自定义的CSS，并为Cookie横幅实现了一个基本的用户界面.

这是我目前的Cookie Banner: CURRENT DESIGN个

以下是我正在努力实现的设计: MY GAOL个