You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/data/data-grid/quickstart/quickstart.md
-98Lines changed: 0 additions & 98 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -127,104 +127,6 @@ const theme = createTheme({
127
127
});
128
128
```
129
129
130
-
## Bundling
131
-
132
-
The Data Grid requires a bundler that can handle CSS imports.
133
-
If you're using a setup that doesn't support CSS imports out of the box, follow the instructions below for your specific environment.
134
-
135
-
### webpack
136
-
137
-
Update your config to add the `style-loader` and `css-loader`.
138
-
139
-
```ts title="webpack.config.js"
140
-
exportdefault {
141
-
// other webpack config
142
-
module: {
143
-
rules: [
144
-
{
145
-
test:/\.css$/i,
146
-
use: ['style-loader', 'css-loader'],
147
-
},
148
-
],
149
-
},
150
-
};
151
-
```
152
-
153
-
### Vite
154
-
155
-
CSS imports should work with no additional configuration when using Vite.
156
-
157
-
### Vitest
158
-
159
-
Add the Data Grid packages to `test.deps.inline`.
160
-
161
-
```ts title="vitest.config.ts"
162
-
exportdefaultdefineConfig({
163
-
test: {
164
-
deps: {
165
-
inline: [
166
-
'@mui/x-data-grid',
167
-
'@mui/x-data-grid-pro',
168
-
'@mui/x-data-grid-premium',
169
-
],
170
-
},
171
-
},
172
-
});
173
-
```
174
-
175
-
### Next.js
176
-
177
-
If you're using the App Router, CSS imports should work out of the box.
178
-
179
-
If you're using the Pages Router, you need to add the Data Grid packages to [`transpilePackages`](https://nextjs.org/docs/app/api-reference/config/next-config-js/transpilePackages).
180
-
181
-
```ts title="next.config.ts"
182
-
exportdefault {
183
-
transpilePackages: [
184
-
'@mui/x-data-grid',
185
-
'@mui/x-data-grid-pro',
186
-
'@mui/x-data-grid-premium',
187
-
],
188
-
};
189
-
```
190
-
191
-
### Node.js
192
-
193
-
If you're importing the packages inside Node.js, you can make CSS imports a no-op like this:
0 commit comments