テーブルスタイルがAgGridReactコンポーネントで正しく機能していませんか？

Question

import webpack from 'webpack'; 
    import path from 'path'; 
    import CopyWebpackPlugin from 'copy-webpack-plugin'; 

    const SOURCE_PATH = path.resolve(__dirname, 'src'); 
    const OUTPUT_PATH = path.resolve(__dirname, 'dist'); 
    const GLOBALS = { 
    'process.env.NODE_ENV': JSON.stringify('development'), 
    'global.IS_BROWSER': true 
    }; 
export default { 
    debug: true, 
devtool: 'source-map', 
    noInfo: false, 
    entry: [ 
'eventsource-polyfill', // necessary for hot reloading with IE 
'webpack-hot-middleware/client?reload=true', //note that it reloads the page 
if hot module reloading fails. 
'./src/index' 
], 
target: 'web', 
output: { 
path: OUTPUT_PATH, // Note: Physical files are only output by the 
production 
    build task `npm run build`. 
    publicPath: '/', 
    filename: 'bundle.js' 
    }, 
    devServer: { 
    contentBase: './src' 
}, 
    plugins: [ 
new webpack.DefinePlugin({ 'process.env.API_HOST': process.env.API_HOST }), 
new webpack.HotModuleReplacementPlugin(), 
new webpack.NoErrorsPlugin() 
], 
module: { 
loaders: [ 
    { 
    test: /\.js$/, 
    include: path.join(__dirname, 'src'), 
    loaders: ['babel'] 
    }, 
    { 
    test: /.jsx?$/, loader: 'babel-loader', exclude: /node_modules/, 
    query: { 
     presets: ['es2015', 'react', 'es2017'], 
     plugins: [ 
     'transform-class-properties', 
     'transform-object-rest-spread', 
     'transform-decorators-legacy', 
     'transform-react-jsx', 
     'transform-runtime' 
     ] 
    } 
    }, 
    { 
    test: /\.json$/, 
    loader: 'json' 
    }, 
    { test: /(\.css)$/, loaders: ['style', 'css'] }, 

    { test: /\.(png||jpg||jpeg||ico)(\?v=\d+\.\d+\.\d+)?$/, loader: 'file' }, 
    { test: /\.gif$/, loader: 'file?name=[name].[ext]' }, 
    { 
    test: /\.scss$/, 
    loader: 'style!css!sass?sourceMap' 
    }, 
    { 
    test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
    loader: "url-loader?limit=10000&mimetype=application/font-woff" 
    }, 
    { 
    test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
    loader: "file-loader" 
    } 
    ] 
}, 
resolve: { 
    alias: { 
     "ag-grid": path.resolve('./node_modules/ag-grid'), 
     "ag-grid-enterprise": path.resolve('./node_modules/ag-grid-enterprise'), 
     react: path.resolve('./node_modules/react') 
    }, 
    extensions: ['', '.js', '.jsx'] 
} 
}; 

これはコンポーネント

import React, { PropTypes } from 'react'; 
import { Link, browserHistory } from 'react-router'; 
import {AgGridReact, AgGridColumn} from "ag-grid-react"; 
import "ag-grid/dist/styles/ag-grid.css"; 
import "ag-grid/dist/styles/theme-blue.css"; 

class clientList extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 

     rowData: [ 
      {make: "Toyota", model: "Celica", price: 35000}, 
      {make: "Ford", model: "Mondeo", price: 32000}, 
      {make: "Porsche", model: "Boxter", price: 72000} 
     ] 

    }; 

} 


onGridReady(params) { 
    this.gridApi = params.api; 
    this.columnApi = params.columnApi; 

    this.gridApi.sizeColumnsToFit(); 
} 

render() { 
    let containerStyle = { 
     height: 115 
    }; 
    return (
     <div> 
      <div style={containerStyle} className="ag-theme-blue"> 
       <AgGridReact 
        // properties 
        rowData={this.state.rowData} 

        // events 
        onGridReady={this.onGridReady} 
        enableSorting 
        enableFilter> 

        {/*column definitions */} 
        <AgGridColumn field="make"></AgGridColumn> 
        <AgGridColumn field="model"></AgGridColumn> 
        <AgGridColumn field="price"></AgGridColumn> 
       </AgGridReact> 
      </div> 
     </div> 

    ); 
} 

sorting and filtering is working fine but i cant able to get in the tabular format as I mentioned in the picture.}

export default clientList; 

誰で、私を助けてください。私はテーブルのAgGridReactコンポーネントで作業しています。このコンポーネントによって提供されるすべての機能に対応できますが、テーブルは表示されません。

Answer 1

あなたのコードはあなたのウェブパックの設定を変更しました。ここLoading CSShttps://www.ag-grid.com/react-more-details/#gsc.tab=0

それとも

をチェック直接HTMLファイルにCSSが含まれています。ここ

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ag-grid/15.0.0/styles/ag-grid.css"> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ag-grid/15.0.0/styles/ag-theme-blue.css"> 

チェックindex.htmlファイル

推奨の方法は、あなたが持っているでしょう設定のWebPACK /がぶ飲みを編集することです。