Use a set of beautiful buttons to master the usage of React Props

You write HTML pages when know for sure, html tag properties are fixed, such as atags href, inputinside the typeproperty. These attributes are built-in, which is not convenient for extension and reuse. If you use React to create a component, you can define some more semantic and logical properties for it, such as color and size. These properties are called props in React. You can define which parts of the component these properties will affect. For such a component, by giving it a suitable name, such as Button, then all buttons can be displayed with it, and it can be displayed in different styles only by changing its properties. Today I will teach you to define such a button component. It has default background color, text color, and solid and wireframe styles. Later, through properties and props, you can control whether it is blue, red or black, and then use another An attribute to control whether it is a solid background or a wireframe. Okay, let's get started.

What you will learn

The last effect picture:

Create React project

Use create-react-app to create a project:

yarn create react-app react-button-props

Equivalent to

npx create-react-app react-button-props

Add classnamesdependency (explain its role later)
```
yarn add classnames
```

Create Button component

In the srcbottom to create a new Buttonfolder. The component should have its own independent folder, and all the files related to this component, such as css, hooks, etc., are put together, so that when viewing the source code of a component, the corresponding files will be in one piece for easy searching. In addition, it is convenient to share this component with others, it is an independent whole.
In the Buttonfolder creation index.jsfile, put inside the code used to define the Button component.
In the Buttoncreation folder style.modules.cssfile, where we first use an ordinary css to define the style of the buttons, follow the tutorial I'll give you introduce styled-components. It is a css-in-js solution

The role of CSS modules

The css file with modules use the css moduleslibrary, which is the create-react-app tool comes in, the global class names to avoid conflicts in normal css, if different style files simultaneously using .buttonsuch a class name, Then the back will cover the front. After use css modules, it will automatically generate a random class name. In this way, the class defined in this component will not be overwritten by classes of the same name defined by other components. Of course, you can also use it. Some global css can be directly defined in ordinary css files.

Write buttonassembly code:

import React from "react";

function Button(props) {
  return <button>{props.children}</button>;
}

export default Button;

The components will react default is passed a propsproperty, comprising inside a default children property, that is to say the use of <Button />the component, two intermediate code labels are all passed in as children. The code above can also be simplified using the rest operator:

function Button({ children }) {
  return <button>{children}</button>;
}

such as:

function App() {
  function Button({ children }) {
    return <button>{children}</button>;
  }
  return <Button>按钮</Button>;
}

Delete all the code in the return of App, import the Button component, and then write it in the return:
```
function App() {
  return <Button>默认按钮</Button>;
}
```

Write Button default style

Under the Button component to open style.modules.cssthe file, write the css code below:

.button {
      
      
  padding: 12px 48px;
  border-radius: 24px;
  background-color: #0076ff;
  box-shadow: 0px 4px 10px rgba(135, 167, 171, 0.5);
  font-size: 14px;
  color: white;
  font-weight: 500;
  text-shadow: 0px 0.5px 1px rgba(0, 0, 0, 0.15);
  outline: none;
  cursor: pointer;
}

Here we set the background, rounded border, font, pointer style and shadow of the button.

Open the index.js file of the Button component, import the css file and assign it to a variable, here called styles:
```
import styles from "./styles.module.css";
```
Button component to add className attribute, where you can use styles.buttonto access the css file .buttonstyle:
```
<button className={styles.button}>{children}</button>
```
As you can see on the page, the style of this default button has been loaded.

Use Props to give buttons different styles

After writing the default style for Button, let's define several variants of it, such as red and black. You can add a color attribute to the Button, which means that when other components use it, you can pass a color attribute. The Button will display different colors according to its value. Here I assume it has three types, one is the default blue, which is The color when the color is not passed, one is red, the color is displayed when the value is red, and the other is black, which is displayed when the color is black. First, let's define the css styles of these two colors:

.red {
    
    
  background-color: #ff4059;
}

.black {
    
    
  background-color: #2e3434;
}

classnames combination style

After defining these two additional styles, you need to combine them with the .buttondefined styles. Here you can do it manually, or you can use the classnames dependency library that was installed just before. It can combine className according to conditions, and only classes that meet certain conditions will be combined. Here, we can use it like this:

<button
  className={classNames(styles.button, {
    [styles.red]: color === "red",
    [styles.black]: color === "black"
  })}
>
  {children}
</button>

It receives multiple parameters. The first one directly passes the class styles.button, indicating that it must have no matter how other attributes change. Finally, an object is passed. The key of the object is the name of the class in styles. The value is of boolean type and requires a condition. If true is returned, the class will be added to the combination, and false will not be added. That here, if the value of color is red, then the button will be .reddefined style.

Then add two buttons to App.js, one with color set to red and one color set to black:

<main>
  <div>
    <Button>默认按钮</Button>
    <Button color="red">红色按钮</Button>
    <Button color="black">黑色按钮</Button>
  </div>
</main>

It should be noted that React requires only one top-level label in the returned JSX, and there can be no parallel multiple ones. For example, you cannot write three buttons at the same time. You need to wrap them under one big label. Here I used it. A main, as a content container, has a div inside which is a button container.

Wireframe style

What if you add a set of buttons in a wireframe style? Very simple, I would add a typeproperty, the default is primarythe, main type call button, the button wireframe secondarysecondary button, then classnames add a new class, the type is secondaryadded to the mix when:

function Button({ children, type = "primary", color = "blue" }) {
  return (
    <button
      className={classNames(styles.button, {
        [styles.red]: color === "red",
        [styles.black]: color === "black",
        [styles.secondary]: type === "secondary"
      })}
    >
      {children}
    </button>
  );
}

Next, define the secondarystyle:

.secondary {
    
    
  background: none;
  border: 2px solid #0076ff;
  color: #0076ff;
}

.secondary.red {
    
    
  border-color: #ff4059;
  color: #ff4059;
}

.secondary.black {
    
    
  border-color: #2e3434;
  color: #2e3434;
}

Here I set different colors for the borders and text of the default blue, red, and black buttons.

Show all button styles

In App.js, we display all the buttons with different attributes, and then add a className to the button container to typeset the buttons. Here I directly use the normal css style, which is the generated App when the project is created. css, import it directly:

App.js

// 省略函数定义
<main>
  <div className="btn__container">
    <Button>默认按钮</Button>
    <Button color="red">红色按钮</Button>
    <Button color="black">黑色按钮</Button>
    <Button type="secondary">线框按钮</Button>
    <Button type="secondary" color="red">
      线框按钮
    </Button>
    <Button type="secondary" color="black">
      线框按钮
    </Button>
  </div>
</main>

App.css

main {
    
    
  width: 100vw;
  height: 100vh;
  background-color: #f2f2f2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn__container {
    
    
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 24px;
  row-gap: 24px;
  align-content: center;
  justify-items: center;
}

Well, the use of React Props to display different styles of buttons ends here. There are several concepts inside:

React components will pass Props parameters by default
Use props to pass any custom properties
Component related files are placed in a folder
css modules -Used to generate random local class names
classnames -Used to combine multiple classes

Have you learned it? Write a comment if you have any questions~