React-codemirror2 (json editor) - reactjs

Question

I'm using the lib "react-codemirror2" to make a JSON editor. But I can't set the styles as I need. This is what I want to get
This is how I'm trying to implement, I've tried setting styles for various modifiers, but nothing helps, and the default styles don't change.:
export const CodeMirrorStyled = styled(CodeMirror)`
& .CodeMirror {
background: ${palette(EPaletteTheme.light_grey, 0)};
font-family: "Roboto", monospace;
font-size: 16px;
height: 198px;
}
& .cm-variable {
color: ${palette(EPaletteTheme.brand_blue, 0)};
}
/* stylelint-disable declaration-no-important */
& div {
&::-webkit-scrollbar {
width: 4px !important;
}
&::-webkit-scrollbar-track {
background: ${palette(EPaletteTheme.light_grey, 0)} !important;
}
&::-webkit-scrollbar-thumb {
background-color: ${palette(EPaletteTheme.grey, 0)} !important;
border-radius: 4px !important;
}
}
/* stylelint-enable declaration-no-important */
& .CodeMirror-gutters {
background: ${palette(EPaletteTheme.light_grey, 0)};
}
`;
<CodeMirrorStyled
value={httpBody}
options={{
theme: "default",
height: "auto",
viewportMargin: Infinity,
mode: {
name: "javascript",
json: true,
statementIndent: 2,
},
lineNumbers: true,
lineWrapping: true,
indentWithTabs: false,
tabSize: 2,
}}
onBeforeChange={(
editor: any,
data: any,
value: string
) => {
onChangeCodeEditor(value);
}}
/>