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")
    );
  • 相关阅读:
    java中使用MD5加密的算法
    [转]自定义注释@interface的用法
    [转]Spring IOC详解
    [转]sed命令详解
    SimpleDateFormat线程不安全问题处理
    Unable to locate the Javac Compiler 解决办法
    MySQL ERROR 1045错误解决办法
    Python装饰器学习(九步入门)
    python 可变参数函数定义* args和**kwargs的用法
    如何更好的利用Node.js的性能极限
  • 原文地址:https://www.cnblogs.com/Answer1215/p/7377535.html
Copyright © 2011-2022 走看看