title: MUI: Styling an accordion to have same border and highlight as textField using theme.palette
body: <p>I want my accordion to look and function almost exactly like a textField before click (I'm not worried about the label though).</p>
  <p>The problem with my below code, when I switch between dark and light mode - my highlight seems correct, but the border grey is not the same when switching between them. Like the textField goes to a darker style. Am I missing something easy to get the exact style, or can someone expand upon this?</p>
  <pre><code>    const useStyles = makeStyles((theme) =&gt; ({
      accordionRoot: {
        border: `1px solid ${theme.palette.grey[400]}`,
        boxShadow: &quot;none&quot;,
      },
      accordionFocused: {
        border: `2px solid ${theme.palette.primary.main}`,
        boxShadow: &quot;none&quot;,
      },
      label: {
      color: theme.palette.grey[500]
      },
      labelFocused: {
        color: theme.palette.primary.main,
        fontWeight: &quot;bold&quot;,
      },
      displayValue: {
        paddingLeft: 5,
      },
      displayValueFocused: {
        paddingLeft: 5,
        color: theme.palette.primary.main,
        fontWeight: &quot;bold&quot;,
      },
    }));
  </code></pre>