基礎グリッドシステムは、私のdiv要素には影響しないのはなぜ基礎グリッドシステムは効果

Question

になりません。

render: function(){ 
    var {todos,showCompleted,searchText} = this.state; 
    var filteredTodos = TodoAPI.filterTodos(todos,showCompleted,searchText); 
    return (
     <div> 
     <h1 className="page-title">Todo App</h1> 

     <div className="row"> 
      <div className="column small-centered small-5 medium-6 large-5"> 
      <div className="container"> 
       <TodoSearch onSearch = {this.handleSearch} /> 
       <TodoList todos ={filteredTodos} onToggle ={this.handleToggle}/> 
       <AddTodo onAddTodo ={this.handleAddTodo}/> 
      </div> 
     </div> 
     </div> 
     </div> 
    ); 
    } 

---

私はスタイルのデバッグに放火犯を使用します。 をして見つけることができません。

.large-5 { 
    width: 33.3333%; 
} 

---

プロジェクトへのレポはhere

です

Answer 1

すでにあなたのwebpack.configでincludedPathを持っているので、あなたが

@import '~foundation-sites/scss/foundation'; 

としての基盤をインポートする必要があり

しばらくの間デバッグした後、私は問題が見つかりました基盤-すべてミックスインは、デフォルトでは、他のグリッドスタイルが含まれていることを

@mixin foundation-everything(
    $flex: true, //You can test this by modifying it directly in your node_modules, set it to false 
    $prototype: false 
) { 
    @if $flex { 
    $global-flexbox: true !global; 
    } 

    @include foundation-global-styles; 
    @if not $flex { 
    @include foundation-grid; 
    } 
    @else { 
    @if $xy-grid { 
     @include foundation-xy-grid-classes; 
    } 
    @else { 
     @include foundation-flex-grid; 
    } 
    } 
    //more scss here 
) 

であり、異なるクラスが基盤-すべてに応じて生成されるので、それは、あなたのクラスが期待されるスタイルを適用しない理由として理由であります mixin（具体的にはXYグリッドが期待通りのものではなくfoundation-gridの代わりに生成されます）。

アプリに応じて、さまざまな方法でこれにアプローチできます。

1）プロジェクトに必要な基礎スタイルを正確に含めることができます。 （私の推薦）

2）どういうわけか、ミックスインを変更

のような他のオプションがあるかもしれません（私はダイナミック輸入はまだ事とは思わない（https://github.com/sass/sass/issues/279？）：一度CSSを生成し、それを含みますあなたのアプリは直接またはreact-foundation packageを使用して.Again、それはあなたが必要なものによって異なります。

Answer 2

React + Foundationを使用していますか？

私はグリッドシステムの使い方については考えていません。あなたのケースでは

は次のように次のようになります。

<div className="grid-basics-example"> 
    <Row className="display"> 
    <Column small={5} medium={6} large={5}> 
     <TodoSearch onSearch = {this.handleSearch} /> 
     <TodoList todos ={filteredTodos} onToggle ={this.handleToggle}/> 
     <AddTodo onAddTodo ={this.handleAddTodo}/> 
    </Column> 
    </Row> 
</div> 

参考：https://react.foundation/