zoukankan      html  css  js  c++  java
  • [React] Style a React component with styled-components

    In this lesson, we remove the mapping between a React component and the styles applied to it via classnames. We write our styles directly within the component, in a real CSS syntax, with the full power of JavaScript.

    Old:

    import React, { Component } from "react";
    import "./App.css";
    
    /* ======================= */
    /* ===== sample data ===== */
    /* ======================= */
    const people = [
      { name: "Anna", sex: "female", age: 28 },
      { name: "John", sex: "male", age: 31 },
      { name: "Tim", sex: "male", age: 7 },
      { name: "Bella", sex: "female", age: 4 }
    ];
    
    /* ============================== */
    /* ===== the main component ===== */
    /* ============================== */
    const App = () =>
      <div>
        {people.map((person, i) => {
          return (
            <Person name={person.name} age={person.age} sex={person.sex} key={i} />
          );
        })}
      </div>;
    
    /* =========================== */
    /* ===== the Person card ===== */
    /* =========================== */
    const Person = props =>
      <div className={`person person--${props.sex}`}>
        <h2 className="person__name">{props.name}</h2>
        <p className="person__description">
          This <strong>{props.sex}</strong> is currently{" "}
          <strong>{props.age} years old</strong>.
        </p>
      </div>;
    
    export default App;
    .person {
      padding: 1.75rem;
      margin: .5rem;
      border-radius: 4px;
      box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
      color: white;
    }
    
    .person--male {
      background: #44bccc;
    }
    
    .person--female {
      background: #f973bc;
    }
    
    .person__name {
      margin-top: 0;
      font-weight: 900;
      margin-bottom: .75rem;
    }
    
    .person__description {
      margin: 0;
      line-height: 1.5;
    }
    
    .person__description strong {
      font-weight: 900;
    }
    
    body {
      margin: 0;
      font-family: -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif,
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Segoe UI Symbol";
    }

    Convert to styled-complement:

    import React, { Component } from "react";
    import styled from "styled-components";
    import "./App.css";
    
    /* ======================= */
    /* ===== sample data ===== */
    /* ======================= */
    const people = [
      { name: "Anna", sex: "female", age: 28 },
      { name: "John", sex: "male", age: 31 },
      { name: "Tim", sex: "male", age: 7 },
      { name: "Bella", sex: "female", age: 4 }
    ];
    
    /* ============================== */
    /* ===== the main component ===== */
    /* ============================== */
    const App = () =>
      <div>
        {people.map((person, i) => {
          return (
            <Person name={person.name} age={person.age} sex={person.sex} key={i} />
          );
        })}
      </div>;
    
    const Name = styled.h2`
      margin-top: 0;
      font-weight: 900;
      margin-bottom: .75rem;
    `;
    
    const Bio = styled.p`
      margin: 0;
      line-height: 1.5;
      strong {
        font-weight: 900;
      }
    `;
    
    const Card = styled.div`
      padding: 1.75rem;
      margin: .5rem;
      border-radius: 4px;
      box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
      color: white;
      background: ${props => (props.sex === "male" ? "#44bccc" : "#f973bc")}
    `;
    
    /* =========================== */
    /* ===== the Person card ===== */
    /* =========================== */
    const Person = props =>
      <Card sex={props.sex}>
        <Name>{props.name}</Name>
        <Bio>
          This <strong>{props.sex}</strong> is currently{" "}
          <strong>{props.age} years old</strong>.
        </Bio>
      </Card>;
    
    export default App;
    body {
      margin: 0;
      font-family: -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif,
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Segoe UI Symbol";
    }
  • 相关阅读:
    【转】c语言中的#号和##号的作用
    stm32 HAL库编程驱动控制文件<stm32f1xx_hal_conf.h>的使能方法
    rt-thread是如何做到通过menuconfig配置将相应文件加入工程和从工程中除去
    rt-thread 学习路线
    stm32使用rt-thread在文件《stm32f1xx_hal.h》中头文件包含顺序引出的错误
    rt-thread之stm32系列BSP制作方法
    使用rt-thread中BSP-stm32 ENV构建工具报错
    rt-thread中动态内存分配之小内存管理模块方法的一点理解
    内存对齐
    rt-thread中线程内置定时器的作用 ---
  • 原文地址:https://www.cnblogs.com/Answer1215/p/7271810.html
Copyright © 2011-2022 走看看