नींव ग्रिड प्रणाली प्रभाव

Question

नहीं ले करता है क्यों नींव ग्रिड प्रणाली मेरी div को प्रभावित नहीं करता:

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

आप नींव आयात करना चाहिए के रूप में

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

जब से तुम पहले से ही अपने webpack.config

में includedPath है

थोड़ी देर के लिए डिबगिंग के बाद, मैंने पाया कि समस्या कि नींव-सब कुछ mixin एक और ग्रिड शैली

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

डिफ़ॉल्ट रूप से शामिल है और कि, क्यों अपनी कक्षाओं की उम्मीद शैलियों लागू नहीं है के रूप में कारण यह है कि विभिन्न वर्गों नींव-सब कुछ के अनुसार उत्पन्न कर रहे हैं है मिक्सीन (विशेष रूप से एक्सवाई ग्रिड आपके द्वारा अपेक्षित एक के बजाय उत्पन्न होता है, नींव-ग्रिड)।

आप अपने ऐप के आधार पर इसे विभिन्न तरीकों से देख सकते हैं।

1) आप अपनी परियोजना में आवश्यक नींव शैलियों का सटीक सेट शामिल कर सकते हैं। (मेरी सिफारिश)

2) किसी तरह mixin बदल

जैसे अन्य विकल्प हो सकता है (मुझे लगता है कि नहीं है गतिशील आयात अभी तक एक बात कर रहे हैं (https://github.com/sass/sass/issues/279?): एक बार सीएसएस पैदा करने और में शामिल अपना ऐप सीधे या react-foundation package का उपयोग कर। इसके अलावा, यह आपको आवश्यकतानुसार निर्भर करता है।

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/