Hệ thống lưới nền tảng không có hiệu lực

Question

Tại sao hệ thống lưới cơ sở không ảnh hưởng div của tôi:

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

---

tôi sử dụng firebug để gỡ lỗi các phong cách: và không thể tìm thấy:

.large-5 { 
    width: 33.3333%; 
} 

---

Một repo cho dự án là here

Answer 1

Bạn nên nhập nền tảng như

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

Vì bạn đã có includedPath trong webpack.config bạn

Sau khi gỡ lỗi một lúc, tôi thấy rằng vấn đề là nền tảng tất cả mọi thứ mixin bao gồm theo mặc định một phong cách lưới

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

và đó là lý do vì sao các lớp học của bạn không áp dụng các phong cách mong đợi, bởi vì các lớp học khác nhau được tạo ra theo nền tảng tất cả mọi thứ mixin (cụ thể là lưới XY được tạo ra thay vì lưới bạn mong đợi, nền tảng lưới).

Bạn có thể tiếp cận điều này theo nhiều cách khác nhau, tùy thuộc vào ứng dụng của bạn.

1) Bạn có thể bao gồm tập hợp các kiểu nền tảng chính xác mà bạn yêu cầu trong dự án của mình. (Khuyến nghị của tôi)

2) Bằng cách nào đó làm thay đổi mixin

Có thể có lựa chọn khác như (tôi không nghĩ rằng nhập khẩu năng động là một điều chưa (https://github.com/sass/sass/issues/279?): Tạo ra các css một lần và bao gồm nó trong ứng dụng của bạn trực tiếp hoặc sử dụng react-foundation package .Tuy nhiên, tùy thuộc vào những gì bạn cần.

Answer 2

Đang sử dụng React + Foundation?

Tôi không nghĩ đó là cách bạn sử dụng hệ thống lưới.

Đối với trường hợp của bạn có thể là như thế này:

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

tham khảo: https://react.foundation/