Bootstrap 4（3）Mixinsの使い方

Question

Bootstrap mixinsの使い方。私はCSSモジュール、SCSSと組み合わせてブートストラップ4を使用します。例えば、これはinput-size用のブートストラップミックスです。

@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モジュールとブートストラップクラスの名前の組み合わせに問題があるようです。私はこのようにそれを解決することができました。

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) 
} 

Answer 1

あなたはミックスインに正しいのparam値を渡していることを確認します。例えば、

@import "bootstrap"; 
.my-custom-input { 
    @include input-size('.form-control', 70px, 12px, 12px, 32px, 5em, 0) 
} 

http://www.codeply.com/go/zc544u3kYN

更新はinput-sizeミックスインは、ブートストラップ4ベータ版では削除されました。