2024-05-31 12:49PM
给下面代码中的下拉单增加css样式:
<input
type="checkbox"
checked={isCarChecked}
onChange={this.handleCarCheckboxChange}
/>
<label>汽车空调</label>
<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 />
</>
)}
登录
请登录后再发表评论。
评论列表:
目前还没有人发表评论