为你的项目添加样式表

你现在可以创建一个新的CSS文件并添加到你的项目

添加步骤：

切换到 src/contacts_assets/assets 目录
```
cd src/contacts_assets/assets/
```
将 main.css 文件重命名为 mycontacts.css.
```
mv main.css mycontacts.css
```
在编辑器中打开 mycontacts.css 文件并删除内容

定义一些样式属性

例如，拷贝贴贴下面的代码：

html {
    background-color: bisque;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    display: block;
    margin: 10px;
}

h1 {
    color: darkblue;
    font-size: 32px;
}

div.new-entry {
    margin: 30px 20px 30px 20px;
}

.new-entry > div {
    margin-bottom: 15px;
}

table {
    margin-top: 12px;
    border-top: 1px solid darkblue;
    border-bottom: 1px solid darkblue;
}

#form {
    margin: 30px 0 30px 20px;
}

button {
    line-height: 20px;
}

#lookupName {
    margin-right: 12px;
}

保存并关闭 mycontacts.css 文件
切换到 src/contacts_assets/src 目录
```
cd ../src
```
在编辑器中打开 index.js 文件并删除内容

拷贝贴贴下面的代码到 index.js 文件

import { Actor, HttpAgent } from '@dfinity/agent';
import { idlFactory as contacts_idl, canisterId as contacts_id } from 'dfx-generated/contacts';

import * as React from 'react';
import { render } from 'react-dom';
import '../assets/mycontacts.css'; // Import custom styles

const agent = new HttpAgent();
const contacts = Actor.createActor(contacts_idl, { agent, canisterId: contacts_id });

class Contact extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
    };
  }

  async doInsert() {
    let name = document.getElementById("newEntryName").value;
    let add1 = document.getElementById("newEntryAddress1").value;
    let add2 = document.getElementById("newEntryAddress2").value;
    let email = document.getElementById("newEntryEmail").value;
    let phone = document.getElementById("newEntryPhone").value;

    contacts.insert(name, add1, add2, email, parseInt(phone, 10));
  }

  async lookup() {
    let name = document.getElementById("lookupName").value;
    contacts.lookup(name).then(opt_entry => {
      let entry;

      if (opt_entry.length == 0) {
        entry = { name: "", description: "", phone: ""};
      } else {
        entry = opt_entry[0]
      }

      document.getElementById("newEntryName").value = entry.name;
      document.getElementById("newEntryAddress1").value = entry.address1;
      document.getElementById("newEntryAddress2").value = entry.address2;
      document.getElementById("newEntryEmail").value = entry.email;
      document.getElementById("newEntryPhone").value = entry.phone.toString();
    });
  }

  render() {
    return (
      <div class="new-entry">
        <h1>My Contacts</h1>
        <div>
          Add or update contact information:
	      <form id="contact">
          <table>
            <tr><td>Name:</td><td><input id="newEntryName"></input></td></tr>
            <tr><td>Address 1 (street):</td><td><input id="newEntryAddress1"></input></td></tr>
            <tr><td>Address 2 (city and state):</td><td><input id="newEntryAddress2"></input></td></tr>
            <tr><td>Email:</td><td><input id="newEntryEmail"></input></td></tr>
            <tr><td>Phone:</td><td><input id="newEntryPhone" type="number"></input></td></tr>
          </table>
        </form>
        </div>
        <div>
          <button onClick={() => this.doInsert()}>Add Contact</button>
        </div>
        <div>
          Lookup name: <input id="lookupName" style={{ "line-height": "20px" }}></input>
          <button onClick={() => this.lookup()}>Lookup</button>
        </div>
      </div>
    );
  }
}

document.title = "DFINITY CONTACT EXAMPLE";

render(<Contact />, document.getElementById('contacts'));

将 index.js 文件重命名为 index.jsx
```
mv index.js index.jsx
```

在编辑器中打开 src/contacts_assets/src/index.html 文件，将 main.css 替换为 mycontacts.css 并且更新 body 包含.

例如：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <title>contacts</title>
    <base href="/">

    <link type="text/css" rel="stylesheet" href="mycontacts.css" />
</head>
<body>
    <div id="contacts"></div>
</body>
</html>

退回到项目根目录
例如：
```
cd ../../..
```

最后更新于3年前