0
如何使用Bootstrap mixins。我將Bootstrap 4與CSS模塊SCSS結合使用。例如,這是一個用於輸入大小的引導混合。如何使用Bootstrap 4(3)Mixins
@mixin input-size($parent, $input-height, $padding-y, $padding-x, $font-size, $line-height, $border-radius) {
#{$parent} {
height: $input-height;
padding: $padding-y $padding-x;
font-size: $font-size;
line-height: $line-height;
@include border-radius($border-radius);
}
select#{$parent} {
height: $input-height;
line-height: $input-height;
}
textarea#{$parent},
select[multiple]#{$parent} {
height: auto;
}
}
如果我想用它,我該怎麼做呢?
First.jsx
<form>
<div className={`form-group ${styles.formula}`}>
<label htmlFor='exampleInputEmail1'>Email address</label>
<input type='email' className='form-control' id='exampleInputEmail1' aria-describedby='emailHelp' placeholder='Enter email' />
<small id='emailHelp' className='form-text text-muted'>We'll never share your email with anyone else.</small>
</div>
我使用它是這樣的。 customBtn工作良好,所以我知道這不是一個設置問題。輸入元素不是? styles.scss
.customBtn {
@include button-variant(white, purple, black)
}
.formula {
@include input-size('.form-control', 70px, 12px, 12px, 32px, 5em, 0)
}
*更新 固定它。 看來CSS模塊和Bootstrap類命名組合有問題。我設法解決這個問題。
First.jsx
<form>
<div className={`form-group ${styles.formula}`}>
<label htmlFor='exampleInputEmail1'>Email address</label>
<input type='email' className={`form-control ${styles.formControl}`} id='exampleInputEmail1' aria-describedby='emailHelp' placeholder='Enter email' />
<small id='emailHelp' className='form-text text-muted'>We'll never share your email with anyone else.</small>
</div>
styles.scss
.customBtn {
@include button-variant(white, purple, black)
}
.formula {
@include input-size('.formControl', 70px, 12px, 12px, 32px, 5em, 0)
}
我必須錯過明顯的東西。它仍然不起作用。我更新了這個問題,你可以請看看它。 –
'.formula'應該應用於'.form-control'的父級..例如'form group' – ZimSystem
試圖改變它(更新First.jsx)但仍然沒有運氣。 –