zoukankan      html  css  js  c++  java
  • [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")
    );
  • 相关阅读:
    Oracle登录报错-ORA-00119
    Oracle11g配置监听
    Python Turtle模块的简单应用
    Turtle模块基本方法和使用(画布)
    python+selenium自动化禅道登录测试
    Xlrd模块读取Excel文件数据
    Selenium原理
    Axure中的登陆界面和动画轮播
    SQL Server创建用户并分配权限
    EF实体框架创建方法
  • 原文地址:https://www.cnblogs.com/Answer1215/p/7377535.html
Copyright © 2011-2022 走看看