kintone-React自習 11日目「React-kintone連携チュートリアル の作成」スタイルの追加

入力フォームにスタイルを当てます。

App.tsx

HTML部分のマークアップです。

import "./styles.css";

・・・
          <div className="formBoxes">
            <label className="formLabel">納品書番号入力：</label>
            <div>
              <input
                className="input"
　　　　　　　　　・・・
              />
              <button
                className="button"
　　　　　　　　　・・・
                value="search">
                検索
              </button>
            </div>
          </div>
・・・

styles.css

スタイルを設定します。

.formBoxes {
  margin-top: 5px;
}
.button {
  border-radius: 3px;
  width: 100%;
  max-width: 200px;
  padding: 10px 10px 8px 10px;
  font-size: 16px;
  color: #fff;
  background-color: #3498db
}
.button:hover {
  background-color: #1D6FA5;
}
.input {
  border-radius: 3px;
  width: 100%;
  height: 20px;
  max-width: 300px;
  font-size: 16px;
  padding: 10px 10px 8px 10px;
}

完成です。

入力画面キャプチャ