So verwenden Sie Bootstrap-Mixins. Ich benutze Bootstrap 4 in Kombination mit CSS Modulen, SCSS. Zum Beispiel ist dies ein Bootstrap-Mixin für die Eingabegröße.So verwenden Sie 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;
}
}
Wenn ich es verwenden möchte, wie würde ich es tun?
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>
ich es so verwenden. Das customBtn funktioniert gut, also weiß ich, dass es kein Einstellungsproblem ist. Eingabeelement ist nicht? styles.scss
.customBtn {
@include button-variant(white, purple, black)
}
.formula {
@include input-size('.form-control', 70px, 12px, 12px, 32px, 5em, 0)
}
* Update es behoben. Es scheint, dass ein Problem mit der Benennung von CSS-Modulen und Bootstrap-Klassen aufgetreten ist. Ich habe es geschafft, es so zu lösen.
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)
}
Ich muss etwas offensichtlich fehlen. Es funktioniert immer noch nicht. Ich habe die Frage aktualisiert, können Sie sich das bitte ansehen. –
'.formula' sollte auf das übergeordnete Element des' .form-control' angewendet werden .. zum Beispiel die 'form group' – ZimSystem
Versucht es zu ändern (aktualisiert das First.jsx in Frage) aber immer noch kein Glück. –