[React] Create component variations in React with styled-components and "extend"

In this lesson, we extend the styles of a base button component to create multiple variations of buttons, using "extend". We can then modify the base styles in one place, and have all button types updated.

 

复制代码
import React from "react";
import styled from "styled-components";

const Button = styled.button`
  background: ${props => props.theme.base};
  color: white;
  font-size: 1rem;
  padding: .75rem 2rem;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  border: none;
  border-radius: 4px;
  margin: .5rem;
  transition: all 0.1s;
  &:hover {
    transform: translateY(1px);
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
  }
`;

const ButtonDanger = Button.extend`background: ${props => props.theme.danger};`;
const ButtonGradient = Button.extend`
  background: ${props => props.theme.gradient};
`;

/* ============================== */
/* ===== the main component ===== */
/* ============================== */
const App = () =>
  <div>
    <Button>Basic button</Button>
    <ButtonDanger>Watch out now!</ButtonDanger>
    <ButtonGradient>Gradient Button!</ButtonGradient>
  </div>;

export default App;
复制代码

 

theme:

复制代码
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

import { ThemeProvider, injectGlobal } from "styled-components";

injectGlobal`
  body {
    margin: 0;
    padding: 2rem;
    font-family: -apple-system,
      BlinkMacSystemFont,
      "Segoe UI",
      Roboto,
      Helvetica,
      Arial,
      sans-serif,
      "Apple Color Emoji",
      "Segoe UI Emoji",
      "Segoe UI Symbol";
  }
`;

const theme = {
  base: "#a04ed9",
  danger: "tomato",
  gradient: `background-color: #00DBDE; background-image: linear-gradient(225deg, #00DBDE 0%, #FC00FF 100%);`
};

ReactDOM.render(
  <ThemeProvider theme={theme}>
    <App />
  </ThemeProvider>,
  document.getElementById("root")
);
复制代码

 

posted @   Zhentiw  阅读(226)  评论(0编辑  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示