[docs] Make CSS interoperability examples easier to use (#20860)

* [docs] Plain css, little detail

I guess the demo has to show that you still have to import the file in order for this approach to work.

* Remove blank lines. Add import in PlainCssButtonDeep.

* fix capitalization

Co-authored-by: Olivier Tassinari <[email protected]>

docs/src/pages/guides/interoperability/interoperability.md

@@ -38,6 +38,7 @@ Nothing fancy, just plain CSS.
 ```jsx
 import React from 'react';
 import Button from '@material-ui/core/Button';
+import './PlainCssButton.css';
 
 export default function PlainCssButton() {
   return (
@@ -93,6 +94,7 @@ The following example overrides the `label` style of `Button` in addition to the
 ```jsx
 import React from 'react';
 import Button from '@material-ui/core/Button';
+import './PlainCssButtonDeep.css';
 
 export default function PlainCssButtonDeep() {
   return (
@@ -132,6 +134,7 @@ Explicitly providing the class names to the component is too much effort?
 ```jsx
 import React from 'react';
 import Button from '@material-ui/core/Button';
+import './GlobalCssButton.css';
 
 export default function GlobalCssButton() {
   return <Button>Customized</Button>;