登录 主页

react 下拉单增加css样式

2024-05-31 12:49PM

给下面代码中的下拉单增加css样式:

<input
  type="checkbox"
  checked={isCarChecked}
  onChange={this.handleCarCheckboxChange}
/>
&nbsp;<label>汽车空调</label>&nbsp;
<input
  type="checkbox"
  checked={isRoomChecked}
  onChange={this.handleRoomCheckboxChange}
/>

{isCarChecked && (
  <>
    <label>请选择算法:</label>
    <select>
    <option>汽车空调(基于保有量)</option>
    <option>汽车空调(基于消费量)</option>
    </select><br/>
  </>

 )}

方法1:在组件内部使用内联样式。

{isCarChecked && (
  <>
    <label>请选择算法:</label>
    <select
      style={{
        font-size: 14px;
        padding: 3px 5px;
        border: 1px solid #ccc;
        border-radius: 4px;
        background-color: #fff;
        margin-top: 10px;
      }}
    >
      <option>汽车空调(基于保有量)</option>
      <option>汽车空调(基于消费量)</option>
    </select>
    <br />
  </>
)}

方法2:在组件外部的 CSS 文件中定义样式类,然后在组件中使用该类。

// 在 CSS 文件中定义样式
.custom-select {
  font-size: 14px;
  padding: 3px 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  margin-top: 10px;
}

// 在组件中使用样式类 import './index.css';
{isCarChecked && (
  <>
    <label>请选择算法:</label>
    <select className="custom-select">
      <option>汽车空调(基于保有量)</option>
      <option>汽车空调(基于消费量)</option>
    </select>
    <br />
  </>
)}

返回>>

登录

请登录后再发表评论。

评论列表:

目前还没有人发表评论