<div id="root"></div>
body {
height: 100vh;
margin: 0;
display: grid;
place-items: center;
}
/** @jsx jsx */
import { css, jsx } from "https://cdn.skypack.dev/@emotion/react";
import styled from "https://cdn.skypack.dev/@emotion/styled";
import React from "https://cdn.skypack.dev/react@17.0.1";
import ReactDOM from "https://cdn.skypack.dev/react-dom@17.0.1";
const BRAND_COLOR = "#F06D06";
const Button = styled.button`
color: ${(props) => (props.primary ? "white" : BRAND_COLOR)};
background: ${(props) => (props.primary ? BRAND_COLOR : "white")};
border-radius: 3px;
border: 2px solid ${BRAND_COLOR};
margin: 0.5em 1em;
padding: 0.25em 1em;
&:hover {
color: black;
}
`;
const App = ({ name }) => {
return (
<div>
<Button>Normal Button</Button>
<Button primary>Primary Button</Button>
</div>
);
};
ReactDOM.render(<App name="World" />, document.getElementById("root"));
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.