React 学习(十) React中的 CSS 写法

React-CSS

• Inline Style

  import React, { PureComponent } from "react";
  
  export default class App extends PureComponent {
    constructor(porps) {
      super();
  
      this.state = {
        color: "purple",
      };
    }
  
    render() {
      const pStyle = {
        color: this.state.color,
        textDecoration: "underline",
      };
  
      return (
        <div>
          <h2 style={{ fontSize: "50px", color: "red" }}>Title</h2>
          <p style={pStyle}>Text</p>
        </div>
      );
    }
  }
  

• Module Style

  // style.module.css
  .title{
    color: xxx;
  }
  
  // App.js
  import React, { memo } from "react";
  import Home from "../home";
  import Profile from "../profile";
  
  // Import in this way will pollution whole situation
  // import "./style.css";
  
  // We should import file as a module
  // first: style.css --> style.module.css
  // second: xxxStyle <-- style.module.css
  // third: xxxStyle.xxx
  import appStyle from "./style.module.css";
  const index = memo(function index(props) {
    // console.log(appStyle);
    return (
      <div id="app">
        App
        <h2 className={appStyle.title}>APP Title</h2>
        <Home />
        <Profile />
      </div>
    );
  });
  export default index;
  
  // Home.js
  import React, { memo } from "react";
  import homeStyle from "./style.module.css";
  
  const index = memo(function index(props) {
    return (
      <div>
        Home
        <h2 className={homeStyle.title}>Home Title</h2>
      </div>
    );
  });
  export default index;
  
  // Profile.js
  import React, { memo } from "react";
  import profileStyle from "./style.module.css";
  
  const index = memo(function index(props) {
    return (
      <div>
        Profile
        <h2 className={profileStyle.title}>Profile Title</h2>
      </div>
    );
  });
  export default index;
  

• styled-components

  Use the principal of Label Template String[^labelTemplateString]

  // Basic Usage
  // index.js
  import React, { memo } from "react";
  import { HomeWrapper, TitleWrapper } from "./style";
  
  const index = memo(function index(props) {
    return (
      <HomeWrapper>
        <div className="banner">
          <span className="active">Home1</span>
          <span>Home2</span>
          <span>Home3</span>
        </div>
        <TitleWrapper>Home Title</TitleWrapper>
      </HomeWrapper>
    );
  });
  export default index;
  
  // style.js
  import styled from "styled-components";
  
  export const HomeWrapper = styled.div`
    font-size: 20px;
    color: red;
  
    .banner {
      background-color: blue;
      span {
        color: #fff;
        &.active {
          color: red;
        }
        &:hover {
          color: green;
        }
        &::after {
          content: "<--";
        }
      }
    }
  `;
  
  // Use the theme props
  export const TitleWrapper = styled.h2`
    text-decoration: underline;
    font-size: ${(props) => props.theme.fontSize};
    color: ${(props) => props.theme.color};
  `;
  

  // index.js
  import React, { PureComponent } from "react";
  import { SSInput } from "./style";
  /**
   * 1.Attribute Penetration
   * 2.Dynamic Props
   */
  class index extends PureComponent {
    constructor() {
      super();
      this.state = {
        textColor: "blue",
      };
    }
  
    render() {
      return (
        <div>
          <hr />
          <div>Profile</div>
          <input type="password" />
          <SSInput type="password" textColor={this.state.textColor} />
        </div>
      );
    }
  }
  
  export default index;
  
  // style.js
  import styled from "styled-components";
  
  // attrs function can set some default value
  export const SSInput = styled.input.attrs({
    placeholder: "SmallStars",
    borderColor: "red",
  })`
    border-color: ${(props) => props.borderColor};
    color: ${(props) => props.textColor};
  `;
  

  // Style Hiheritance and Theme Props Shared
  // index.js
  import React, { memo } from "react";
  import { ThemeProvider } from "styled-components";
  import Home from "../home";
  import Profile from "../profile";
  import { Button, PrimaryButton } from "./style";
  const index = memo(function index(props) {
    return (
      // Theme Settings
      <ThemeProvider theme={{ color: "yellow", fontSize: "40px" }}>
        App
        <h2>APP Title</h2>
        <Home />
        <Profile />
        <Button>Button</Button>
        <PrimaryButton>PrimaryButton</PrimaryButton>
      </ThemeProvider>
    );
  });
  export default index;
  
  // style.js
  import styled from "styled-components";
  
  export const Button = styled.button`
    padding: 10px 20px;
    color: red;
    border-color: blue;
    font-size: 18px;
  `;
  export const PrimaryButton = styled(Button)`
    color: orange;
    border-color: pink;
  `;