# Custom Styling for Show Hint
**URL:** https://discuss.codemirror.net/t/custom-styling-for-show-hint/4087
**Category:** Uncategorized
**Created:** [March 3, 2022, 5:30pm UTC](https://discuss.codemirror.net/t/custom-styling-for-show-hint/4087 "2022-03-03T17:30:49Z")
**Posts on this page:** 12
**Page:** 1
### Author:  [@noormuhmd](https://discuss.codemirror.net/u/noormuhmd)
#### Post date: [March 3, 2022, 5:30pm UTC](https://discuss.codemirror.net/t/custom-styling-for-show-hint/4087/1 "2022-03-03T17:30:49Z")
I’m trying to write custom styling for the codemirror show hint option in my angular application. When I try to edit the show-hint.css inside node\_modules, it is reflecting. But I’m not able to do it inside my project. I tried to declare the ‘CodeMirror-hints’ and 'CodeMirror-hine CSS classes in my style file(I’m using scss), but it didn’t work. Can anyone help me out?
Thanks in advance
---
### Author:  [@froii](https://discuss.codemirror.net/u/froii)
#### Post date: [March 3, 2022, 10:18pm UTC](https://discuss.codemirror.net/t/custom-styling-for-show-hint/4087/2 "2022-03-03T22:18:06Z")
have you tried [CodeMirror Styling Example](https://codemirror.net/6/examples/styling/) ?
for me, it is easier than declaring in your own scss file.
like this -
```auto
export const defaultTheme = EditorView.theme({
'*': {
fontFamily: 'Nunito, sans-serif',
cursor: 'text',
},
'.cm-gutters': {
display: 'none',
},
'.cm-content': {
padding: '0 !important',
},
'.cm-line': {
height: '28px',
padding: '0 4px !important',
lineHeight: '26px',
verticalAlign: 'middle',
fontSize: '15px',
color: 'red',
},
'.cm-scroller': {
display: 'block',
},
'.cm-completionDetail': {
fontSize: '12px',
float: 'right',
},
'.cm-underline': {textDecoration: 'underline 3px red'},
'.cm-tooltip.cm-tooltip-autocomplete > ul': {
maxWidth: '500px',
minWidth: '200px',
},
});
```
```auto
const state = EditorState.create({
doc,
extensions: [
defaultTheme,
```
---
### Author:  [@noormuhmd](https://discuss.codemirror.net/u/noormuhmd)
#### Post date: [March 4, 2022, 6:18am UTC](https://discuss.codemirror.net/t/custom-styling-for-show-hint/4087/3 "2022-03-04T06:18:44Z")
Thank you. I’ve one doubt here. Can this be use to syle **Hint**?
---
### Author:  [@marijn](https://discuss.codemirror.net/u/marijn)
#### Post date: [March 4, 2022, 8:16am UTC](https://discuss.codemirror.net/t/custom-styling-for-show-hint/4087/4 "2022-03-04T08:16:40Z")
@froii The question is about CodeMirror 5, not 6.
Adding custom CSS to style these classes should just work. Just note that, if show-hint.css is loaded after your CSS, rules with the same specificity from the file loaded last will take precedence. Browser devtools allow you to see all rules that apply to an element when you inspect it, and are often an effective way to debug this kind of thing.
---
### Author:  [@froii](https://discuss.codemirror.net/u/froii)
#### Post date: [March 4, 2022, 12:23pm UTC](https://discuss.codemirror.net/t/custom-styling-for-show-hint/4087/5 "2022-03-04T12:23:07Z")
my bad, sorry. i was inattentive (
---
### Author:  [@noormuhmd](https://discuss.codemirror.net/u/noormuhmd)
#### Post date: [March 7, 2022, 5:03am UTC](https://discuss.codemirror.net/t/custom-styling-for-show-hint/4087/6 "2022-03-07T05:03:38Z")
@marijn Thanks. I think it is the problem. ‘CodeMirror-hints’ style class specified in both the show-hint.css file(which is inside code mirror under node\_modules) and my component’s scss file is loaded. But the first one is being used. Could you help to override the default CSS class?
---
### Author:  [@marijn](https://discuss.codemirror.net/u/marijn)
#### Post date: [March 7, 2022, 10:11am UTC](https://discuss.codemirror.net/t/custom-styling-for-show-hint/4087/7 "2022-03-07T10:11:14Z")
Read up on CSS and rule precedence. That kind of thing is outside of the scope of the library forum.
---
### Author:  [@noormuhmd](https://discuss.codemirror.net/u/noormuhmd)
#### Post date: [March 7, 2022, 12:35pm UTC](https://discuss.codemirror.net/t/custom-styling-for-show-hint/4087/8 "2022-03-07T12:35:31Z")
Okay sure. Thanks for the support ✌
---
### Author:  [@noormuhmd](https://discuss.codemirror.net/u/noormuhmd)
#### Post date: [March 9, 2022, 5:01am UTC](https://discuss.codemirror.net/t/custom-styling-for-show-hint/4087/9 "2022-03-09T05:01:59Z")
@marjin I think it is not related to Rule precedence. I’m trying to give a width property in my component’s style class
```auto
.CodeMirror-hints{
width: 150px !important;
}
```
This width property is not specified in the library’s show-hint.css file. So ideally it should apply this style, but it is not happening. I’m curious if I’m doing this the right way!
---
### Author:  [@marijn](https://discuss.codemirror.net/u/marijn)
#### Post date: [March 9, 2022, 6:32am UTC](https://discuss.codemirror.net/t/custom-styling-for-show-hint/4087/10 "2022-03-09T06:32:59Z")
That class has a `max-height` property set. Maybe that’s what’s preventing your `width` from taking effect?
---
### Author:  [@noormuhmd](https://discuss.codemirror.net/u/noormuhmd)
#### Post date: [March 9, 2022, 7:19am UTC](https://discuss.codemirror.net/t/custom-styling-for-show-hint/4087/11 "2022-03-09T07:19:27Z")
@marijn I don’t think so. When I gave the width property in library’s CSS class, it is working.
fyi,
this is how I’m implementing show-hint in my component
everything is working fine except custom styling
---
### Author:  [@noormuhmd](https://discuss.codemirror.net/u/noormuhmd)
#### Post date: [March 14, 2022, 12:51pm UTC](https://discuss.codemirror.net/t/custom-styling-for-show-hint/4087/12 "2022-03-14T12:51:35Z")
It worked when I gave the CSS classes in the styles.scss file of my application. (Have to use ‘!important’, jfyi)
Thanks for your help @marijn @froii