yarn add styled-components

import React from 'react'
import styled from 'styled-components'

const StyledModalWindow = styled.div`
    ${({ isClose, isShow }) =>
        isClose
            ? `visibility: hidden;`
            : isShow
            ? `visibility: visible;`
            : `visibility: hidden;`}
    z-index: 1000;
`;

const Overlay = styled.div`
    background-color: rgba(0, 0, 0, 0.6);
    position: fixed;
    top: -100vh;
    left: -100vw;
    bottom: -100vh;
    right: -100vw;
    z-index: 1;
`;

const ContentWrapper = styled.div`
    background-color: white;
    box-sizing: border-box;
    border-radius: 8vmin;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vmin;
    text-align: center;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 80vmin;
    z-index: 2;
    > button {
        position: absolute;
        top: 4vmin;
        right: 4vmin;
    }
`;

const Content = styled.div`
    max-height: 80vmin;
    padding: 4vmin;
`;

const Title = styled.h1`
    font-size: 4vmin;
    margin: 3vmin auto 0;
`;

const Text = styled.p`
    color: #777;
    font-size: 2vmin;
    margin: 4vmin 0 0;
`;

const ModalWindow = ({
	className,
	title,
	text,
	isShow,
	isShowCloseButton,
	children
}) => {
	const [isClose, setIsClose] = useState(false);
	return (
		<StyledModalWindow className={className} isShow={isShow} isClose={isClose}>
			<Overlay />
			<ContentWrapper>
				{isShowCloseButton && (
					<Button bgColor="transparent" onClick={() => setIsClose(true)}>
						✖
					</Button>
				)}
				<Content>
					<Title>{title}</Title>
					<Text>{text}</Text>
					{children}
				</Content>
			</ContentWrapper>
		</StyledModalWindow>
	);
};

export default ModalWindow

import React from 'react'
import styled from 'styled-components'
import Button from './components/Button';
import Margin from './components/Margin';
import ModalWindow from './components/ModalWindow';

const App = () => {
	const [isShow, setIsShow] = useState(true);
	const handleClick = useCallback(() => setIsShow(false), []);

	const buttonTheme = {
		background: "orange",
		color: "#ffffff"
	};

	const buttonSize = {
		fontSize: "1vmin",
		padding: "2vmin 4vmin"
	};

	return (
		<div>
			<ModalWindow
				title="年齢認証"
				text="あなたは18歳以上ですか？"
				isShow={isShow}
				onClick={handleClick}
				isShowCloseButton={false}
			>
				<Margin top="2vmin" right="1vmin">
					<Button onClick={handleClick} size={buttonSize}>
						いいえ
					</Button>
				</Margin>
				<Margin top="4vmin" left="1vmin">
					<Button onClick={handleClick} theme={buttonTheme} size={buttonSize}>
						はい
					</Button>
				</Margin>
			</ModalWindow>
		</div>
	);
};

export default App