Question: (I couldn't figure out how to upload my screen capture to stackoverflow. So this is a streamable link: <https://streamable.com/0im8tx>)

In this video, VSCode opens QueriesController.class as opposed to QueriesController.java when I cmd click into `QueriesController`.

I have compiled provided the definitions of the jar file in my workspace:

```
    "settings": {
        "java.project.referencedLibraries": {
            "include": [
                "<path-to-jar-that-contains-QueriesController.jar>",
.... 
            "sources": {
                "<path-to-jar-that-contains-QueriesController.jar>": "/my/local/java/definition/src/folder",

```

Does anyone know why VSCode is choosing to open the definition as a .class file rather than a .java file?

Answer: 
would something like this work for you?

```js
const {LinearProgress, makeStyles} = MaterialUI

const useStyles = makeStyles({
  root: {
    height: 10,
    borderRadius: 5
  },
  bar: ({ progress }) => ({
    borderRadius: 5,
    background: `linear-gradient(90deg, #6fcbb6 ${100 - progress}%, #9c64f4 100%)`
  })
});

const Progress = ({ progress = 20 }) =>  {
  const classes = useStyles({ progress });

  return (
      <LinearProgress
        classes={{ root: classes.root, bar: classes.bar }}
        variant="determinate"
        value={progress}
      />
  );
}

ReactDOM.render(<Progress />, document.getElementById('root'))
```

```html
<script src="https://unpkg.com/react@latest/umd/react.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/babel-standalone@latest/babel.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
<div id="root"></div>
```
You can stagger it like this:

```js
const {LinearProgress, makeStyles} = MaterialUI

const useStyles = makeStyles({
  root: {
height: 5,
borderRadius: 5
  },
  bar: ({ props }) => ({
borderRadius: 5,
backgroundImage: `linear-gradient(90deg, rgba(74,211,255,1) 30% 
${props.value > 60 ? `,rgba(158,220,190,1) 60%` : ""} 
${props.value > 85 ? `,rgba(255,171,0,1) 90%` : ""} 
${props.value > 95 ? `,rgba(255,0,0,1) 100%` : ""})`,
  }),
});

const Progress = (props) =>  {
  const classes = useStyles({ props });

  return (
      <LinearProgress {...props}
        classes={{ root: classes.root, bar: classes.bar }}
      />
  );
}

ReactDOM.render(<div><Progress value={70} variant="determinate" /><p/><Progress value={100} variant="determinate" /></div>, document.getElementById('root'))
```

```html
<script src="https://unpkg.com/react@latest/umd/react.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/babel-standalone@latest/babel.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
<div id="root"></div>
```