How to style using classes (css modules)?
Nobody has claimed this yet.
Assessment
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Newbie friendliness
- 30/100
- Issue type
- Feature
- Clarity
- Needs clarification
- Activity status
- Stale
- Tech stack
- react, sass, typescript
- Domain
- frontend
Research direction
Start by reading the component's styling and documentation entry points, focusing on how className reaches the container and how textarea styles are applied. Determine whether the existing API documents or supports disabling those inline styles; done means the styling behavior is clearly controllable through classes and documented for CSS Modules users.
Written by the indexing model from the issue text.
Description
Like most people I'm using css (sass) modules for my components. How do I use css modules with this component?
I see that I can pass className as a prop but then that only gets applied to the .w-tc-editor container div. The textarea still has very opinionated styles applied INLINE on it:
margin: 0px;
border: 0px;
background: none;
box-sizing: inherit;
display: inherit;
font-family: inherit;
font-size: inherit;
font-style: inherit;
font-variant-ligatures: inherit;
font-weight: inherit;
letter-spacing: inherit;
line-height: inherit;
tab-size: inherit;
text-indent: inherit;
text-rendering: inherit;
text-transform: inherit;
white-space: pre-wrap;
word-break: keep-all;
overflow-wrap: break-word;
outline: 0px;
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
resize: none;
color: inherit;
opacity: 0.8;
overflow: hidden;
-webkit-font-smoothing: antialiased;
-webkit-text-fill-color: transparent;
padding: 10px;
min-height: 16px;
How do I use this component without any sort of styling on it at all so that I can use classes to control the styling? If there is a way to do this it's not clear at all in the documentation.
- Dominant language
- TypeScript
- Stars
- 575
- Forks
- 23
- PR merge metrics
- No merged PRs in 30d
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from uiwjs/react-textarea-code-editor
-
Difficulty 5/5 Over a week Newbie friendliness 20/100
uiwjs/react-textarea-code-editor#186 · 2 reactions ·
-
Difficulty 3/5 1-2 days Newbie friendliness 42/100
-
Difficulty 3/5 1-2 days Newbie friendliness 30/100
uiwjs/react-textarea-code-editor#183 · 1 comment · 2 reactions ·
-
Difficulty 3/5 1-2 days Newbie friendliness 42/100
uiwjs/react-textarea-code-editor#182 · 3 reactions ·
-
Difficulty 3/5 1-2 days Newbie friendliness 38/100
uiwjs/react-textarea-code-editor#181 · 4 comments · 12 reactions ·
All issues in uiwjs/react-textarea-code-editor
Similar issues
-
bug(cli): hapi doctor inline-media prints a fabricated B:\ helper-script path in packaged installs Open
Difficulty 2/5 1-3 hours Newbie friendliness 70/100
-
Crush Open
Difficulty 1/5 Under an hour Newbie friendliness 85/100
catppuccin/catppuccin#3125 ·
-
Add a SECURITY.md Open
Difficulty 1/5 Under an hour Newbie friendliness 90/100
ElementsProject/cln-application#167 · 1 comment · 1 reaction ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 75/100
Quantco/pnpm-licenses#17 ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 75/100