Change color on textarea text

[MartinJohannesNilsen]

Hi.

I want to change the color on the textarea-text, and have tried using the prop textareaProps={{ style: { color: "white" } }}, but something seems off. I am not that confident in passing props like this, so I do believe this may be a syntax-error.

I would be grateful if someone could have pointed me in the right direction

[jaywcjlove]

https://github.com/uiwjs/react-md-editor/blob/c46b9fe0afeed20f2ac2b2ba5ba851b655f572cf/src/components/TextArea/index.less#L1-L116

You can change the style through CSS.

@Martinnilsen99

[MartinJohannesNilsen]

@jaywcjlove

Thank you for your reply! I have tried editing the classes you provided, and tried in different browsers - but can't seem to change all the text in the edit-view. I want to have the notepad with black background and white text on everything except links. Have also tried editing the file you provided in my node_modules, but don't seem to get the results I want.

Do you have any clue why I am having these issues? Or have anyone done what I want or something similar already?

[jaywcjlove]

https://github.com/uiwjs/react-md-editor/blob/c46b9fe0afeed20f2ac2b2ba5ba851b655f572cf/src/components/TextArea/Markdown.tsx#L20-L23

@Martinnilsen99 Color control is here.

[jaywcjlove]

@Martinnilsen99 Refactored update

[chidexebere]

This problem is similar to mine. I cant seem to change the text color and background color when highlighted.

I have trace the problem to this piece of code under textarea styling.

/**
 * Hack to apply on some CSS on IE10 and IE11
 */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  /**
    * IE doesn't support '-webkit-text-fill-color'
    * So we use 'color: transparent' to make the text transparent on IE
    * Unlike other browsers, it doesn't affect caret color in IE
    */
  .@{md-editor}-text-input {
    color: transparent !important;
    &::selection {
      background-color: #accef7 !important;
      color: transparent !important;
    }
  }
}

I dont understand why !important was used but it seems to be stopping the customization. Please help.