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)但仍然没有运气。 –