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")
    );
  • 相关阅读:
    spring-mvc----数据库数据到页面错误--tomcat启动不了
    springmvc注解@RequestMapping
    数据库到jsp页面报错(一)
    IDEA秒退或者一直让填写激活码问题
    spting Boot 创建一个springBoot项目
    SSM框架整合(实现从数据库到页面展示)
    asp.net dbproviderfactory(提供程序工厂模型)多数据库访问
    connectionStrings 中的 providerName 属性
    IDisposable
    利用提示引导语句运行
  • 原文地址:https://www.cnblogs.com/Answer1215/p/7377535.html
Copyright © 2011-2022 走看看