> For the complete documentation index, see [llms.txt](https://mixdao.gitbook.io/dfinity/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://mixdao.gitbook.io/dfinity/si-.-jiao-cheng/9.-tian-jia-qian-duan-yang-shi/wei-ni-de-xiang-mu-tian-jia-yang-shi-biao.md).

# 为你的项目添加样式表

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

添加步骤：

1. 切换到 `src/contacts_assets/assets` 目录

   ```
   cd src/contacts_assets/assets/
   ```
2. 将 `main.css` 文件重命名为 `mycontacts.css`.

   ```
   mv main.css mycontacts.css
   ```
3. 在编辑器中打开 `mycontacts.css` 文件并删除内容
4. 定义一些样式属性

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

   ```
   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;
   }
   ```
5. 保存并关闭 `mycontacts.css` 文件
6. 切换到 `src/contacts_assets/src` 目录

   ```
   cd ../src
   ```
7. 在编辑器中打开 `index.js` 文件并删除内容
8. 拷贝贴贴下面的代码到 `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'));
   ```
9. 将 `index.js` 文件重命名为 `index.jsx`&#x20;

   ```
   mv index.js index.jsx
   ```
10. 在编辑器中打开 `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>
    ```
11. 退回到项目根目录

    例如：

    ```
    cd ../../..
    ```