Cách liên kết CSS trong Reacjs

Bạn đã thêm các chức năng vào ứng dụng React của mình. Bây giờ, đã đến lúc thêm giao diện mà ứng dụng React của bạn xứng đáng

Trong phần này, bạn sẽ học cách thêm CSS vào ứng dụng React JS của mình

Hướng dẫn React này là phần 3 của 11 trong loạt bài React cho người mới bắt đầu

• Phần 1 – Hướng dẫn React. Hướng dẫn học React cho người mới bắt đầu năm 2020
• Phần 2 – Làm việc với React Form và Xử lý sự kiện
• Phần 4 – Cách chỉnh sửa các mục Todos
• Phần 5 – Trạng thái phản ứng liên tục trong bộ lưu trữ cục bộ
• Phần 6 – Bắt đầu với React Lifecycle Methods
• Phần 7 – Bắt đầu với React Hook
• Phần 8 – Cách sử dụng SVG Icons trong React
• Phần 9 – Định tuyến với React Router
• Phần 10 – Cách thêm Menu Hamburger trong React
• Phần 11 – Triển khai Ứng dụng React lên Trang GitHub

Mặc dù có một số cách chúng ta có thể đạt được điều đó, nhưng chúng ta sẽ đề cập đến CSS nội tuyến, biểu định kiểu CSS và Mô-đun CSS trong phần này

Một số chiến lược khác bao gồm – CSS-in-JS (e. g các thành phần được tạo kiểu, Cảm xúc, JSS), Sass & SCSS, Ít hơn, Tiện ích-Đầu tiên-CSS (e. g CSS Tailwind)

Hãy đi sâu vào

Bắt đầu với Biểu định kiểu CSS

Điều này khá đơn giản vì bạn nên làm quen với nó khi làm việc với tệp HTML. Vì vậy, hãy bắt đầu bằng cách tạo một tệp mới có tên là

import React from "react"
import ReactDOM from "react-dom"
//component file
import TodoContainer from "./components/TodoContainer"

//stylesheet
import "./App.css"
ReactDOM.render(
  <React.StrictMode>
    <TodoContainer />
  React.StrictMode>,
  document.getElementById("root")
)

9 trong thư mục

render() {
  return (
    <div className="container">
      <div className="inner">
        <Header />
        <InputTodo addTodoProps={this.addTodoItem} />
        <TodosList
          todos={this.state.todos}
          handleChangeProps={this.handleChange}
          deleteTodoProps={this.delTodo}
        />
      div>
    div>
  );
}

0. Bên trong tệp này, thêm các kiểu cơ sở sau

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Segoe UI", Arial, sans-serif;
  line-height: 1.4;
  color: #444;
  background: #fff;
  height: 100vh;
}

Lưu các tập tin

Tiếp theo, nhập nó vào tệp

render() {
  return (
    <div className="container">
      <div className="inner">
        <Header />
        <InputTodo addTodoProps={this.addTodoItem} />
        <TodosList
          todos={this.state.todos}
          handleChangeProps={this.handleChange}
          deleteTodoProps={this.delTodo}
        />
      div>
    div>
  );
}

1

import React from "react"
import ReactDOM from "react-dom"
//component file
import TodoContainer from "./components/TodoContainer"

//stylesheet
import "./App.css"
ReactDOM.render(
  <React.StrictMode>
    <TodoContainer />
  React.StrictMode>,
  document.getElementById("root")
)

Nếu muốn, bạn có thể nhập tệp trong tệp thành phần chính,

render() {
  return (
    <div className="container">
      <div className="inner">
        <Header />
        <InputTodo addTodoProps={this.addTodoItem} />
        <TodosList
          todos={this.state.todos}
          handleChangeProps={this.handleChange}
          deleteTodoProps={this.delTodo}
        />
      div>
    div>
  );
}

2 thay vì

render() {
  return (
    <div className="container">
      <div className="inner">
        <Header />
        <InputTodo addTodoProps={this.addTodoItem} />
        <TodosList
          todos={this.state.todos}
          handleChangeProps={this.handleChange}
          deleteTodoProps={this.delTodo}
        />
      div>
    div>
  );
}

1. Lưu các tập tin

Bạn sẽ thấy các kiểu CSS của mình được hiển thị ở giao diện người dùng

Bây giờ, hãy bắt đầu thêm tên lớp

Hãy nhớ rằng, trong HTML, chúng ta thêm các lớp CSS vào các phần tử bằng cách sử dụng cú pháp

render() {
  return (
    <div className="container">
      <div className="inner">
        <Header />
        <InputTodo addTodoProps={this.addTodoItem} />
        <TodosList
          todos={this.state.todos}
          handleChangeProps={this.handleChange}
          deleteTodoProps={this.delTodo}
        />
      div>
    div>
  );
}

4. Nhưng trong React JSX, chúng tôi sử dụng một cú pháp đặc biệt có tên là

render() {
  return (
    <div className="container">
      <div className="inner">
        <Header />
        <InputTodo addTodoProps={this.addTodoItem} />
        <TodosList
          todos={this.state.todos}
          handleChangeProps={this.handleChange}
          deleteTodoProps={this.delTodo}
        />
      div>
    div>
  );
}

5

Mở

render() {
  return (
    <div className="container">
      <div className="inner">
        <Header />
        <InputTodo addTodoProps={this.addTodoItem} />
        <TodosList
          todos={this.state.todos}
          handleChangeProps={this.handleChange}
          deleteTodoProps={this.delTodo}
        />
      div>
    div>
  );
}

2 và cập nhật phương thức

render() {
  return (
    <div className="container">
      <div className="inner">
        <Header />
        <InputTodo addTodoProps={this.addTodoItem} />
        <TodosList
          todos={this.state.todos}
          handleChangeProps={this.handleChange}
          deleteTodoProps={this.delTodo}
        />
      div>
    div>
  );
}

7 để bao gồm các tên lớp

render() {
  return (
    <div className="container">
      <div className="inner">
        <Header />
        <InputTodo addTodoProps={this.addTodoItem} />
        <TodosList
          todos={this.state.todos}
          handleChangeProps={this.handleChange}
          deleteTodoProps={this.delTodo}
        />
      div>
    div>
  );
}

Ghi chú. Chúng tôi đã thêm một trình bao bọc

render() {
  return (
    <div className="container">
      <div className="inner">
        <Header />
        <InputTodo addTodoProps={this.addTodoItem} />
        <TodosList
          todos={this.state.todos}
          handleChangeProps={this.handleChange}
          deleteTodoProps={this.delTodo}
        />
      div>
    div>
  );
}

8 khác vào trong

render() {
  return (
    <div className="container">
      <div className="inner">
        <Header />
        <InputTodo addTodoProps={this.addTodoItem} />
        <TodosList
          todos={this.state.todos}
          handleChangeProps={this.handleChange}
          deleteTodoProps={this.delTodo}
        />
      div>
    div>
  );
}

7

Tiếp theo, vào bên trong tệp

<form onSubmit={this.handleSubmit} className="form-container">
  <input
    type="text"
    className="input-text"
    placeholder="Add todo..."
    value={this.state.title}
    name="title"
    onChange={this.onChange}
  />
  <button className="input-submit">Submitbutton>
form>

0 và cập nhật phần tử

<form onSubmit={this.handleSubmit} className="form-container">
  <input
    type="text"
    className="input-text"
    placeholder="Add todo..."
    value={this.state.title}
    name="title"
    onChange={this.onChange}
  />
  <button className="input-submit">Submitbutton>
form>

1,

<form onSubmit={this.handleSubmit} className="form-container">
  <input
    type="text"
    className="input-text"
    placeholder="Add todo..."
    value={this.state.title}
    name="title"
    onChange={this.onChange}
  />
  <button className="input-submit">Submitbutton>
form>

2 và

<form onSubmit={this.handleSubmit} className="form-container">
  <input
    type="text"
    className="input-text"
    placeholder="Add todo..."
    value={this.state.title}
    name="title"
    onChange={this.onChange}
  />
  <button className="input-submit">Submitbutton>
form>

3 để bao gồm tên lớp. bạn nên có

<form onSubmit={this.handleSubmit} className="form-container">
  <input
    type="text"
    className="input-text"
    placeholder="Add todo..."
    value={this.state.title}
    name="title"
    onChange={this.onChange}
  />
  <button className="input-submit">Submitbutton>
form>

Sau đó, cập nhật tệp

import React from "react"
import ReactDOM from "react-dom"
//component file
import TodoContainer from "./components/TodoContainer"

//stylesheet
import "./App.css"
ReactDOM.render(
  <React.StrictMode>
    <TodoContainer />
  React.StrictMode>,
  document.getElementById("root")
)

9 để bao gồm các kiểu sau

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 600px;
  margin: 0 auto;
}

.inner {
  width: 100%;
  padding: 8rem 10px 4rem;
}

.form-container {
  width: 100%;
  margin-bottom: 20px;
  display: flex;
  border-radius: calc(0.5 * 100px);
  box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.38);
  justify-content: space-evenly;
}

.input-text {
  font-size: 1rem;
  font-weight: 400;
  width: 85%;
  padding-right: 5px;
  padding-left: 10px;
  border-radius: calc(0.5 * 100px);
}

.input-text::placeholder {
  color: #000;
}

.input-submit {
  background: transparent;
  color: #5b5b5b;
  text-transform: capitalize;
  cursor: pointer;
  font-weight: 600;
  margin-right: 10px;
}

.input-text,
.input-submit {
  height: 45px;
  outline: none;
  border: none;
}

Lưu tệp của bạn và kiểm tra giao diện người dùng

Đó là nó. Đơn giản

kiểu dáng nội tuyến

Nếu bạn còn nhớ, chúng tôi sử dụng kiểu dáng nội tuyến trong tài liệu HTML bằng cách chuyển một chuỗi gồm tất cả các kiểu dáng đến thuộc tính

<form onSubmit={this.handleSubmit} className="form-container">
  <input
    type="text"
    className="input-text"
    placeholder="Add todo..."
    value={this.state.title}
    name="title"
    onChange={this.onChange}
  />
  <button className="input-submit">Submitbutton>
form>

5. Nhưng với React JSX, chúng ta sẽ gán một đối tượng JavaScript cho thuộc tính

Vào bên trong tệp

<form onSubmit={this.handleSubmit} className="form-container">
  <input
    type="text"
    className="input-text"
    placeholder="Add todo..."
    value={this.state.title}
    name="title"
    onChange={this.onChange}
  />
  <button className="input-submit">Submitbutton>
form>

6 và cập nhật thành phần tiêu đề để bao gồm thuộc tính

<form onSubmit={this.handleSubmit} className="form-container">
  <input
    type="text"
    className="input-text"
    placeholder="Add todo..."
    value={this.state.title}
    name="title"
    onChange={this.onChange}
  />
  <button className="input-submit">Submitbutton>
form>

5

return (
  <header>
    <h1
      style={{
        fontSize: "6rem",
        fontWeight: "600",
        marginBottom: "2rem",
        lineHeight: "1em",
        color: "#ececec",
        textTransform: "lowercase",
        textAlign: "center",
      }}
    >
      todos
    h1>
  header>
)

Lưu tệp và kiểm tra lối vào để xem các thay đổi của bạn

Trong mã, bạn sẽ nhận thấy hai dấu ngoặc nhọn. Chúng ta đã biết rằng các biểu thức JavaScript hợp lệ trong JSX được viết bên trong dấu ngoặc nhọn. Dấu ngoặc nhọn thứ hai dành cho kiểu dáng nội tuyến ở dạng đối tượng JavaScript

Ngoài ra, hãy lưu ý rằng các phím kiểu nằm trong camelCase

Một cách khác để sử dụng kiểu nội tuyến trong React là sử dụng các biến. Vẫn trong tệp

<form onSubmit={this.handleSubmit} className="form-container">
  <input
    type="text"
    className="input-text"
    placeholder="Add todo..."
    value={this.state.title}
    name="title"
    onChange={this.onChange}
  />
  <button className="input-submit">Submitbutton>
form>

6, hãy thêm đoạn mã sau vào trên câu lệnh

<form onSubmit={this.handleSubmit} className="form-container">
  <input
    type="text"
    className="input-text"
    placeholder="Add todo..."
    value={this.state.title}
    name="title"
    onChange={this.onChange}
  />
  <button className="input-submit">Submitbutton>
form>

9

const headerStyle = {
  padding: "20px 0",
  lineHeight: "1.5em",
}

Sau đó, cập nhật thẻ mở

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 600px;
  margin: 0 auto;
}

.inner {
  width: 100%;
  padding: 8rem 10px 4rem;
}

.form-container {
  width: 100%;
  margin-bottom: 20px;
  display: flex;
  border-radius: calc(0.5 * 100px);
  box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.38);
  justify-content: space-evenly;
}

.input-text {
  font-size: 1rem;
  font-weight: 400;
  width: 85%;
  padding-right: 5px;
  padding-left: 10px;
  border-radius: calc(0.5 * 100px);
}

.input-text::placeholder {
  color: #000;
}

.input-submit {
  background: transparent;
  color: #5b5b5b;
  text-transform: capitalize;
  cursor: pointer;
  font-weight: 600;
  margin-right: 10px;
}

.input-text,
.input-submit {
  height: 45px;
  outline: none;
  border: none;
}

0 để bạn có

<header style={headerStyle}>

Lưu các tập tin. Bây giờ, mã của bạn sẽ trông như thế này

import React from "react"

const Header = () => {
  const headerStyle = {
    padding: "20px 0",
    lineHeight: "1.5em",
  }

  return (
    <header style={headerStyle}>
      <h1
        style={{
          fontSize: "6rem",
          fontWeight: "600",
          marginBottom: "2rem",
          lineHeight: "1em",
          color: "#ececec",
          textTransform: "lowercase",
          textAlign: "center",
        }}
      >
        todos
      h1>
    header>
  )
}

export default Header

Kiểm tra giao diện người dùng để xem các thay đổi của bạn hoặc kiểm tra phần tử

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 600px;
  margin: 0 auto;
}

.inner {
  width: 100%;
  padding: 8rem 10px 4rem;
}

.form-container {
  width: 100%;
  margin-bottom: 20px;
  display: flex;
  border-radius: calc(0.5 * 100px);
  box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.38);
  justify-content: space-evenly;
}

.input-text {
  font-size: 1rem;
  font-weight: 400;
  width: 85%;
  padding-right: 5px;
  padding-left: 10px;
  border-radius: calc(0.5 * 100px);
}

.input-text::placeholder {
  color: #000;
}

.input-submit {
  background: transparent;
  color: #5b5b5b;
  text-transform: capitalize;
  cursor: pointer;
  font-weight: 600;
  margin-right: 10px;
}

.input-text,
.input-submit {
  height: 45px;
  outline: none;
  border: none;
}

1 để xem khai báo kiểu CSS của bạn. Trong đoạn mã này, chúng tôi đã tạo một đối tượng,

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 600px;
  margin: 0 auto;
}

.inner {
  width: 100%;
  padding: 8rem 10px 4rem;
}

.form-container {
  width: 100%;
  margin-bottom: 20px;
  display: flex;
  border-radius: calc(0.5 * 100px);
  box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.38);
  justify-content: space-evenly;
}

.input-text {
  font-size: 1rem;
  font-weight: 400;
  width: 85%;
  padding-right: 5px;
  padding-left: 10px;
  border-radius: calc(0.5 * 100px);
}

.input-text::placeholder {
  color: #000;
}

.input-submit {
  background: transparent;
  color: #5b5b5b;
  text-transform: capitalize;
  cursor: pointer;
  font-weight: 600;
  margin-right: 10px;
}

.input-text,
.input-submit {
  height: 45px;
  outline: none;
  border: none;
}

2 với thông tin kiểu dáng và sau đó tham chiếu nó trong thuộc tính

<form onSubmit={this.handleSubmit} className="form-container">
  <input
    type="text"
    className="input-text"
    placeholder="Add todo..."
    value={this.state.title}
    name="title"
    onChange={this.onChange}
  />
  <button className="input-submit">Submitbutton>
form>

5 của thẻ

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 600px;
  margin: 0 auto;
}

.inner {
  width: 100%;
  padding: 8rem 10px 4rem;
}

.form-container {
  width: 100%;
  margin-bottom: 20px;
  display: flex;
  border-radius: calc(0.5 * 100px);
  box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.38);
  justify-content: space-evenly;
}

.input-text {
  font-size: 1rem;
  font-weight: 400;
  width: 85%;
  padding-right: 5px;
  padding-left: 10px;
  border-radius: calc(0.5 * 100px);
}

.input-text::placeholder {
  color: #000;
}

.input-submit {
  background: transparent;
  color: #5b5b5b;
  text-transform: capitalize;
  cursor: pointer;
  font-weight: 600;
  margin-right: 10px;
}

.input-text,
.input-submit {
  height: 45px;
  outline: none;
  border: none;
}

0. Ở đây, chúng tôi đã sử dụng một dấu ngoặc nhọn

tiếp tục

Tạo kiểu ứng dụng React với các mô-đun CSS

Đôi khi, bạn muốn giới hạn cách tiếp cận biểu định kiểu CSS để giữ các kiểu chung của bạn và sau đó mở rộng phạm vi các kiểu thành phần của bạn cục bộ

Mô-đun CSS cho phép chúng tôi làm điều đó. Nó loại bỏ nguy cơ xung đột tên liên quan đến bộ chọn CSS hoặc một số vấn đề khác liên quan đến kiểu dáng phạm vi toàn cầu

Ví dụ: nếu bạn thêm Mô-đun CSS cho thành phần

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 600px;
  margin: 0 auto;
}

.inner {
  width: 100%;
  padding: 8rem 10px 4rem;
}

.form-container {
  width: 100%;
  margin-bottom: 20px;
  display: flex;
  border-radius: calc(0.5 * 100px);
  box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.38);
  justify-content: space-evenly;
}

.input-text {
  font-size: 1rem;
  font-weight: 400;
  width: 85%;
  padding-right: 5px;
  padding-left: 10px;
  border-radius: calc(0.5 * 100px);
}

.input-text::placeholder {
  color: #000;
}

.input-submit {
  background: transparent;
  color: #5b5b5b;
  text-transform: capitalize;
  cursor: pointer;
  font-weight: 600;
  margin-right: 10px;
}

.input-text,
.input-submit {
  height: 45px;
  outline: none;
  border: none;
}

5, các kiểu được áp dụng sẽ chỉ được áp dụng cho thành phần đó. Bằng cách này, bạn có thể sử dụng cùng tên lớp trong các thành phần khác nhau mà không lo xung đột với bộ chọn CSS

Hãy xem nó hoạt động như thế nào

Để tạo kiểu cho thành phần

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 600px;
  margin: 0 auto;
}

.inner {
  width: 100%;
  padding: 8rem 10px 4rem;
}

.form-container {
  width: 100%;
  margin-bottom: 20px;
  display: flex;
  border-radius: calc(0.5 * 100px);
  box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.38);
  justify-content: space-evenly;
}

.input-text {
  font-size: 1rem;
  font-weight: 400;
  width: 85%;
  padding-right: 5px;
  padding-left: 10px;
  border-radius: calc(0.5 * 100px);
}

.input-text::placeholder {
  color: #000;
}

.input-submit {
  background: transparent;
  color: #5b5b5b;
  text-transform: capitalize;
  cursor: pointer;
  font-weight: 600;
  margin-right: 10px;
}

.input-text,
.input-submit {
  height: 45px;
  outline: none;
  border: none;
}

5, hãy vào bên trong thư mục

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 600px;
  margin: 0 auto;
}

.inner {
  width: 100%;
  padding: 8rem 10px 4rem;
}

.form-container {
  width: 100%;
  margin-bottom: 20px;
  display: flex;
  border-radius: calc(0.5 * 100px);
  box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.38);
  justify-content: space-evenly;
}

.input-text {
  font-size: 1rem;
  font-weight: 400;
  width: 85%;
  padding-right: 5px;
  padding-left: 10px;
  border-radius: calc(0.5 * 100px);
}

.input-text::placeholder {
  color: #000;
}

.input-submit {
  background: transparent;
  color: #5b5b5b;
  text-transform: capitalize;
  cursor: pointer;
  font-weight: 600;
  margin-right: 10px;
}

.input-text,
.input-submit {
  height: 45px;
  outline: none;
  border: none;
}

7 và tạo một tệp có tên

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 600px;
  margin: 0 auto;
}

.inner {
  width: 100%;
  padding: 8rem 10px 4rem;
}

.form-container {
  width: 100%;
  margin-bottom: 20px;
  display: flex;
  border-radius: calc(0.5 * 100px);
  box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.38);
  justify-content: space-evenly;
}

.input-text {
  font-size: 1rem;
  font-weight: 400;
  width: 85%;
  padding-right: 5px;
  padding-left: 10px;
  border-radius: calc(0.5 * 100px);
}

.input-text::placeholder {
  color: #000;
}

.input-submit {
  background: transparent;
  color: #5b5b5b;
  text-transform: capitalize;
  cursor: pointer;
  font-weight: 600;
  margin-right: 10px;
}

.input-text,
.input-submit {
  height: 45px;
  outline: none;
  border: none;
}

8. Sau đó, thêm các kiểu sau

.item {
  font-size: 1.2rem;
  list-style-type: none;
  padding: 17px 0px;
  border-bottom: 1px solid #eaeaea;
}

.checkbox {
  margin-right: 15px;
}

.item button {
  font-size: 13px;
  background: #f1f3f4;
  border: none;
  cursor: pointer;
  float: right;
  outline: none;
  border-radius: 100px;
  height: 50px;
  width: 50px;
  margin: -10px 0 0 10px;
}

Sau đó, vào bên trong tệp

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 600px;
  margin: 0 auto;
}

.inner {
  width: 100%;
  padding: 8rem 10px 4rem;
}

.form-container {
  width: 100%;
  margin-bottom: 20px;
  display: flex;
  border-radius: calc(0.5 * 100px);
  box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.38);
  justify-content: space-evenly;
}

.input-text {
  font-size: 1rem;
  font-weight: 400;
  width: 85%;
  padding-right: 5px;
  padding-left: 10px;
  border-radius: calc(0.5 * 100px);
}

.input-text::placeholder {
  color: #000;
}

.input-submit {
  background: transparent;
  color: #5b5b5b;
  text-transform: capitalize;
  cursor: pointer;
  font-weight: 600;
  margin-right: 10px;
}

.input-text,
.input-submit {
  height: 45px;
  outline: none;
  border: none;
}

9 và nhập tệp

return (
  <header>
    <h1
      style={{
        fontSize: "6rem",
        fontWeight: "600",
        marginBottom: "2rem",
        lineHeight: "1em",
        color: "#ececec",
        textTransform: "lowercase",
        textAlign: "center",
      }}
    >
      todos
    h1>
  header>
)

0 như vậy

import React from "react"
import ReactDOM from "react-dom"
//component file
import TodoContainer from "./components/TodoContainer"

//stylesheet
import "./App.css"
ReactDOM.render(
  <React.StrictMode>
    <TodoContainer />
  React.StrictMode>,
  document.getElementById("root")
)

0

Sau đó, cập nhật đánh dấu trong câu lệnh

<form onSubmit={this.handleSubmit} className="form-container">
  <input
    type="text"
    className="input-text"
    placeholder="Add todo..."
    value={this.state.title}
    name="title"
    onChange={this.onChange}
  />
  <button className="input-submit">Submitbutton>
form>

9 để bao gồm tên lớp

import React from "react"
import ReactDOM from "react-dom"
//component file
import TodoContainer from "./components/TodoContainer"

//stylesheet
import "./App.css"
ReactDOM.render(
  <React.StrictMode>
    <TodoContainer />
  React.StrictMode>,
  document.getElementById("root")
)

1

Lưu tệp của bạn và kiểm tra giao diện người dùng

Vậy chúng ta đã làm gì?

Đầu tiên, chúng tôi yêu cầu React xử lý tệp CSS dưới dạng mô-đun CSS bằng cách thêm vào tệp

return (
  <header>
    <h1
      style={{
        fontSize: "6rem",
        fontWeight: "600",
        marginBottom: "2rem",
        lineHeight: "1em",
        color: "#ececec",
        textTransform: "lowercase",
        textAlign: "center",
      }}
    >
      todos
    h1>
  header>
)

2. Mô-đun này sau đó được nhập vào tệp

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 600px;
  margin: 0 auto;
}

.inner {
  width: 100%;
  padding: 8rem 10px 4rem;
}

.form-container {
  width: 100%;
  margin-bottom: 20px;
  display: flex;
  border-radius: calc(0.5 * 100px);
  box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.38);
  justify-content: space-evenly;
}

.input-text {
  font-size: 1rem;
  font-weight: 400;
  width: 85%;
  padding-right: 5px;
  padding-left: 10px;
  border-radius: calc(0.5 * 100px);
}

.input-text::placeholder {
  color: #000;
}

.input-submit {
  background: transparent;
  color: #5b5b5b;
  text-transform: capitalize;
  cursor: pointer;
  font-weight: 600;
  margin-right: 10px;
}

.input-text,
.input-submit {
  height: 45px;
  outline: none;
  border: none;
}

9 và được khai báo dưới dạng một đối tượng JavaScript có tên là

return (
  <header>
    <h1
      style={{
        fontSize: "6rem",
        fontWeight: "600",
        marginBottom: "2rem",
        lineHeight: "1em",
        color: "#ececec",
        textTransform: "lowercase",
        textAlign: "center",
      }}
    >
      todos
    h1>
  header>
)

4

Đối tượng này chứa tất cả bộ chọn lớp trong tệp

return (
  <header>
    <h1
      style={{
        fontSize: "6rem",
        fontWeight: "600",
        marginBottom: "2rem",
        lineHeight: "1em",
        color: "#ececec",
        textTransform: "lowercase",
        textAlign: "center",
      }}
    >
      todos
    h1>
  header>
)

0 và chúng tôi đã tham chiếu chúng trong thuộc tính className của JSX với

return (
  <header>
    <h1
      style={{
        fontSize: "6rem",
        fontWeight: "600",
        marginBottom: "2rem",
        lineHeight: "1em",
        color: "#ececec",
        textTransform: "lowercase",
        textAlign: "center",
      }}
    >
      todos
    h1>
  header>
)

6 (ví dụ:

return (
  <header>
    <h1
      style={{
        fontSize: "6rem",
        fontWeight: "600",
        marginBottom: "2rem",
        lineHeight: "1em",
        color: "#ececec",
        textTransform: "lowercase",
        textAlign: "center",
      }}
    >
      todos
    h1>
  header>
)

7)

Xin lưu ý

Bạn có thể đặt tên cho đối tượng

return (
  <header>
    <h1
      style={{
        fontSize: "6rem",
        fontWeight: "600",
        marginBottom: "2rem",
        lineHeight: "1em",
        color: "#ececec",
        textTransform: "lowercase",
        textAlign: "center",
      }}
    >
      todos
    h1>
  header>
)

4 bất cứ điều gì bạn muốn. Ngoài ra, hãy lưu ý cách bạn đặt tên cho một lớp có nhiều hơn một từ (e. g

return (
  <header>
    <h1
      style={{
        fontSize: "6rem",
        fontWeight: "600",
        marginBottom: "2rem",
        lineHeight: "1em",
        color: "#ececec",
        textTransform: "lowercase",
        textAlign: "center",
      }}
    >
      todos
    h1>
  header>
)

9). Đối với điều này, bạn nên sử dụng camelCase (tôi. e

const headerStyle = {
  padding: "20px 0",
  lineHeight: "1.5em",
}

0). Nhưng nếu bạn muốn có dấu gạch nối trong bộ chọn lớp của mình, thì bạn nên sử dụng ký hiệu ngoặc (ví dụ:

const headerStyle = {
  padding: "20px 0",
  lineHeight: "1.5em",
}

1) để tham chiếu bộ chọn bên trong tệp

const headerStyle = {
  padding: "20px 0",
  lineHeight: "1.5em",
}

2

Bây giờ, nếu bạn kiểm tra danh sách việc cần làm trong các công cụ dành cho nhà phát triển trình duyệt của mình, bạn sẽ thấy rằng mô-đun CSS tạo ra các tên lớp duy nhất. Với điều này, bạn không phải lo lắng về xung đột tên bộ chọn

Đối với những người trong chúng ta, những người muốn sử dụng Sass để biên dịch tệp

const headerStyle = {
  padding: "20px 0",
  lineHeight: "1.5em",
}

3 thành CSS thông thường. Tất cả những gì bạn phải làm là cài đặt

const headerStyle = {
  padding: "20px 0",
  lineHeight: "1.5em",
}

4 như vậy

import React from "react"
import ReactDOM from "react-dom"
//component file
import TodoContainer from "./components/TodoContainer"

//stylesheet
import "./App.css"
ReactDOM.render(
  <React.StrictMode>
    <TodoContainer />
  React.StrictMode>,
  document.getElementById("root")
)

2

Đó là tất cả

Nếu thích, bạn có thể sử dụng Mô-đun CSS với Sass. Chỉ cần thay đổi phần mở rộng tệp

return (
  <header>
    <h1
      style={{
        fontSize: "6rem",
        fontWeight: "600",
        marginBottom: "2rem",
        lineHeight: "1em",
        color: "#ececec",
        textTransform: "lowercase",
        textAlign: "center",
      }}
    >
      todos
    h1>
  header>
)

0 thành

const headerStyle = {
  padding: "20px 0",
  lineHeight: "1.5em",
}

3. Và cập nhật phần nhập trong tệp

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 600px;
  margin: 0 auto;
}

.inner {
  width: 100%;
  padding: 8rem 10px 4rem;
}

.form-container {
  width: 100%;
  margin-bottom: 20px;
  display: flex;
  border-radius: calc(0.5 * 100px);
  box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.38);
  justify-content: space-evenly;
}

.input-text {
  font-size: 1rem;
  font-weight: 400;
  width: 85%;
  padding-right: 5px;
  padding-left: 10px;
  border-radius: calc(0.5 * 100px);
}

.input-text::placeholder {
  color: #000;
}

.input-submit {
  background: transparent;
  color: #5b5b5b;
  text-transform: capitalize;
  cursor: pointer;
  font-weight: 600;
  margin-right: 10px;
}

.input-text,
.input-submit {
  height: 45px;
  outline: none;
  border: none;
}

9 để phản ánh phần mở rộng

Thêm Kiểu khi bất kỳ mục công việc nào được hoàn thành

Ở đây, chúng tôi sẽ thêm một

const headerStyle = {
  padding: "20px 0",
  lineHeight: "1.5em",
}

8 vào một nhiệm vụ đã hoàn thành trong danh sách việc cần làm. Điều này nên được thẳng về phía trước. Trong thành phần

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 600px;
  margin: 0 auto;
}

.inner {
  width: 100%;
  padding: 8rem 10px 4rem;
}

.form-container {
  width: 100%;
  margin-bottom: 20px;
  display: flex;
  border-radius: calc(0.5 * 100px);
  box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.38);
  justify-content: space-evenly;
}

.input-text {
  font-size: 1rem;
  font-weight: 400;
  width: 85%;
  padding-right: 5px;
  padding-left: 10px;
  border-radius: calc(0.5 * 100px);
}

.input-text::placeholder {
  color: #000;
}

.input-submit {
  background: transparent;
  color: #5b5b5b;
  text-transform: capitalize;
  cursor: pointer;
  font-weight: 600;
  margin-right: 10px;
}

.input-text,
.input-submit {
  height: 45px;
  outline: none;
  border: none;
}

5, hãy thêm các kiểu sau vào phương thức

render() {
  return (
    <div className="container">
      <div className="inner">
        <Header />
        <InputTodo addTodoProps={this.addTodoItem} />
        <TodosList
          todos={this.state.todos}
          handleChangeProps={this.handleChange}
          deleteTodoProps={this.delTodo}
        />
      div>
    div>
  );
}

7 nhưng phía trên câu lệnh

<form onSubmit={this.handleSubmit} className="form-container">
  <input
    type="text"
    className="input-text"
    placeholder="Add todo..."
    value={this.state.title}
    name="title"
    onChange={this.onChange}
  />
  <button className="input-submit">Submitbutton>
form>

9

import React from "react"
import ReactDOM from "react-dom"
//component file
import TodoContainer from "./components/TodoContainer"

//stylesheet
import "./App.css"
ReactDOM.render(
  <React.StrictMode>
    <TodoContainer />
  React.StrictMode>,
  document.getElementById("root")
)

3

Sau đó, cập nhật câu lệnh

<form onSubmit={this.handleSubmit} className="form-container">
  <input
    type="text"
    className="input-text"
    placeholder="Add todo..."
    value={this.state.title}
    name="title"
    onChange={this.onChange}
  />
  <button className="input-submit">Submitbutton>
form>

9 để bạn có

import React from "react"
import ReactDOM from "react-dom"
//component file
import TodoContainer from "./components/TodoContainer"

//stylesheet
import "./App.css"
ReactDOM.render(
  <React.StrictMode>
    <TodoContainer />
  React.StrictMode>,
  document.getElementById("root")
)

4

Trong đoạn mã này, chúng tôi đã giới thiệu một thẻ mới,

<header style={headerStyle}>

3 và sau đó thêm thuộc tính

<form onSubmit={this.handleSubmit} className="form-container">
  <input
    type="text"
    className="input-text"
    placeholder="Add todo..."
    value={this.state.title}
    name="title"
    onChange={this.onChange}
  />
  <button className="input-submit">Submitbutton>
form>

5 vào thẻ đó. Chúng tôi cũng đã sử dụng toán tử bậc ba trong thuộc tính

<form onSubmit={this.handleSubmit} className="form-container">
  <input
    type="text"
    className="input-text"
    placeholder="Add todo..."
    value={this.state.title}
    name="title"
    onChange={this.onChange}
  />
  <button className="input-submit">Submitbutton>
form>

5 để tự động thay đổi kiểu CSS nếu bất kỳ (các) mục việc cần làm nào được hoàn thành

Như một bồi dưỡng,

Toán tử bậc ba (hoặc câu lệnh if nội tuyến) như được sử dụng ở đây sẽ kiểm tra xem có mục nào trong danh sách việc cần làm đã được hoàn thành hay chưa

Đây là cách nó hoạt động

import React from "react"
import ReactDOM from "react-dom"
//component file
import TodoContainer from "./components/TodoContainer"

//stylesheet
import "./App.css"
ReactDOM.render(
  <React.StrictMode>
    <TodoContainer />
  React.StrictMode>,
  document.getElementById("root")
)

5

i. e nếu điều kiện là

<header style={headerStyle}>

6 (trong trường hợp của chúng tôi, nếu nhiệm vụ được đánh dấu hoàn thành), chúng tôi áp dụng câu lệnh thứ hai,

<header style={headerStyle}>

7 (chúng tôi đã tạo biến này làm đối tượng chứa thông tin kiểu dáng trong cùng một thành phần), nếu không, chúng tôi áp dụng null ( . không có phong cách)

Vâng. Lưu tệp và kiểm tra lối vào

đó là nó. Nhưng trước khi chúng ta chuyển sang phần tiếp theo, hãy đơn giản là tối ưu hóa mã của chúng ta

Sử dụng hủy diệt

Nếu bạn nhìn vào thành phần

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 600px;
  margin: 0 auto;
}

.inner {
  width: 100%;
  padding: 8rem 10px 4rem;
}

.form-container {
  width: 100%;
  margin-bottom: 20px;
  display: flex;
  border-radius: calc(0.5 * 100px);
  box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.38);
  justify-content: space-evenly;
}

.input-text {
  font-size: 1rem;
  font-weight: 400;
  width: 85%;
  padding-right: 5px;
  padding-left: 10px;
  border-radius: calc(0.5 * 100px);
}

.input-text::placeholder {
  color: #000;
}

.input-submit {
  background: transparent;
  color: #5b5b5b;
  text-transform: capitalize;
  cursor: pointer;
  font-weight: 600;
  margin-right: 10px;
}

.input-text,
.input-submit {
  height: 45px;
  outline: none;
  border: none;
}

5, chúng tôi đã viết các bội số của

<header style={headerStyle}>

9 để lấy các giá trị

import React from "react"

const Header = () => {
  const headerStyle = {
    padding: "20px 0",
    lineHeight: "1.5em",
  }

  return (
    <header style={headerStyle}>
      <h1
        style={{
          fontSize: "6rem",
          fontWeight: "600",
          marginBottom: "2rem",
          lineHeight: "1em",
          color: "#ececec",
          textTransform: "lowercase",
          textAlign: "center",
        }}
      >
        todos
      h1>
    header>
  )
}

export default Header

0,

import React from "react"

const Header = () => {
  const headerStyle = {
    padding: "20px 0",
    lineHeight: "1.5em",
  }

  return (
    <header style={headerStyle}>
      <h1
        style={{
          fontSize: "6rem",
          fontWeight: "600",
          marginBottom: "2rem",
          lineHeight: "1em",
          color: "#ececec",
          textTransform: "lowercase",
          textAlign: "center",
        }}
      >
        todos
      h1>
    header>
  )
}

export default Header

1 và

import React from "react"

const Header = () => {
  const headerStyle = {
    padding: "20px 0",
    lineHeight: "1.5em",
  }

  return (
    <header style={headerStyle}>
      <h1
        style={{
          fontSize: "6rem",
          fontWeight: "600",
          marginBottom: "2rem",
          lineHeight: "1em",
          color: "#ececec",
          textTransform: "lowercase",
          textAlign: "center",
        }}
      >
        todos
      h1>
    header>
  )
}

export default Header

2. Điều này có thể gây khó khăn nếu ứng dụng của bạn trở nên phức tạp

Thay vì làm những việc này, bạn có thể rút từng biến ra khỏi

import React from "react"

const Header = () => {
  const headerStyle = {
    padding: "20px 0",
    lineHeight: "1.5em",
  }

  return (
    <header style={headerStyle}>
      <h1
        style={{
          fontSize: "6rem",
          fontWeight: "600",
          marginBottom: "2rem",
          lineHeight: "1em",
          color: "#ececec",
          textTransform: "lowercase",
          textAlign: "center",
        }}
      >
        todos
      h1>
    header>
  )
}

export default Header

3. Nói cách khác, bạn có thể "hủy cấu trúc"

import React from "react"

const Header = () => {
  const headerStyle = {
    padding: "20px 0",
    lineHeight: "1.5em",
  }

  return (
    <header style={headerStyle}>
      <h1
        style={{
          fontSize: "6rem",
          fontWeight: "600",
          marginBottom: "2rem",
          lineHeight: "1em",
          color: "#ececec",
          textTransform: "lowercase",
          textAlign: "center",
        }}
      >
        todos
      h1>
    header>
  )
}

export default Header

3 và lấy các biến này từ nó

Để hủy cấu trúc của

import React from "react"

const Header = () => {
  const headerStyle = {
    padding: "20px 0",
    lineHeight: "1.5em",
  }

  return (
    <header style={headerStyle}>
      <h1
        style={{
          fontSize: "6rem",
          fontWeight: "600",
          marginBottom: "2rem",
          lineHeight: "1em",
          color: "#ececec",
          textTransform: "lowercase",
          textAlign: "center",
        }}
      >
        todos
      h1>
    header>
  )
}

export default Header

0 từ

import React from "react"

const Header = () => {
  const headerStyle = {
    padding: "20px 0",
    lineHeight: "1.5em",
  }

  return (
    <header style={headerStyle}>
      <h1
        style={{
          fontSize: "6rem",
          fontWeight: "600",
          marginBottom: "2rem",
          lineHeight: "1em",
          color: "#ececec",
          textTransform: "lowercase",
          textAlign: "center",
        }}
      >
        todos
      h1>
    header>
  )
}

export default Header

6, bạn sẽ có một cái gì đó như thế này

import React from "react"
import ReactDOM from "react-dom"
//component file
import TodoContainer from "./components/TodoContainer"

//stylesheet
import "./App.css"
ReactDOM.render(
  <React.StrictMode>
    <TodoContainer />
  React.StrictMode>,
  document.getElementById("root")
)

6

Điều tương tự cũng áp dụng cho

import React from "react"

const Header = () => {
  const headerStyle = {
    padding: "20px 0",
    lineHeight: "1.5em",
  }

  return (
    <header style={headerStyle}>
      <h1
        style={{
          fontSize: "6rem",
          fontWeight: "600",
          marginBottom: "2rem",
          lineHeight: "1em",
          color: "#ececec",
          textTransform: "lowercase",
          textAlign: "center",
        }}
      >
        todos
      h1>
    header>
  )
}

export default Header

1 và

import React from "react"

const Header = () => {
  const headerStyle = {
    padding: "20px 0",
    lineHeight: "1.5em",
  }

  return (
    <header style={headerStyle}>
      <h1
        style={{
          fontSize: "6rem",
          fontWeight: "600",
          marginBottom: "2rem",
          lineHeight: "1em",
          color: "#ececec",
          textTransform: "lowercase",
          textAlign: "center",
        }}
      >
        todos
      h1>
    header>
  )
}

export default Header

2

Hãy áp dụng điều này trong thành phần

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 600px;
  margin: 0 auto;
}

.inner {
  width: 100%;
  padding: 8rem 10px 4rem;
}

.form-container {
  width: 100%;
  margin-bottom: 20px;
  display: flex;
  border-radius: calc(0.5 * 100px);
  box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.38);
  justify-content: space-evenly;
}

.input-text {
  font-size: 1rem;
  font-weight: 400;
  width: 85%;
  padding-right: 5px;
  padding-left: 10px;
  border-radius: calc(0.5 * 100px);
}

.input-text::placeholder {
  color: #000;
}

.input-submit {
  background: transparent;
  color: #5b5b5b;
  text-transform: capitalize;
  cursor: pointer;
  font-weight: 600;
  margin-right: 10px;
}

.input-text,
.input-submit {
  height: 45px;
  outline: none;
  border: none;
}

5. Thêm dòng mã này ngay phía trên câu lệnh

<form onSubmit={this.handleSubmit} className="form-container">
  <input
    type="text"
    className="input-text"
    placeholder="Add todo..."
    value={this.state.title}
    name="title"
    onChange={this.onChange}
  />
  <button className="input-submit">Submitbutton>
form>

9

import React from "react"
import ReactDOM from "react-dom"
//component file
import TodoContainer from "./components/TodoContainer"

//stylesheet
import "./App.css"
ReactDOM.render(
  <React.StrictMode>
    <TodoContainer />
  React.StrictMode>,
  document.getElementById("root")
)

7

Sau đó, thay thế mọi

<header style={headerStyle}>

9 bằng các biến tương ứng của chúng. Chẳng hạn, nên thay thế

.item {
  font-size: 1.2rem;
  list-style-type: none;
  padding: 17px 0px;
  border-bottom: 1px solid #eaeaea;
}

.checkbox {
  margin-right: 15px;
}

.item button {
  font-size: 13px;
  background: #f1f3f4;
  border: none;
  cursor: pointer;
  float: right;
  outline: none;
  border-radius: 100px;
  height: 50px;
  width: 50px;
  margin: -10px 0 0 10px;
}

2 bằng

import React from "react"

const Header = () => {
  const headerStyle = {
    padding: "20px 0",
    lineHeight: "1.5em",
  }

  return (
    <header style={headerStyle}>
      <h1
        style={{
          fontSize: "6rem",
          fontWeight: "600",
          marginBottom: "2rem",
          lineHeight: "1em",
          color: "#ececec",
          textTransform: "lowercase",
          textAlign: "center",
        }}
      >
        todos
      h1>
    header>
  )
}

export default Header

2, v.v. Tuyên bố

<form onSubmit={this.handleSubmit} className="form-container">
  <input
    type="text"
    className="input-text"
    placeholder="Add todo..."
    value={this.state.title}
    name="title"
    onChange={this.onChange}
  />
  <button className="input-submit">Submitbutton>
form>

9 của bạn sẽ giống như thế này

Tôi có thể sử dụng CSS trong React JS không?

Tôi có thể sử dụng CSS nội tuyến trong React không?

Tại sao CSS không hoạt động trong React JS?