How to change line-height in textarea?

[kaitoukid-1412]

https://codesandbox.io/s/silly-shannon-bohqz2?file=/src/App.js

[snowystinger]

Why are you trying to change these? This component is implementing and enforcing Spectrum design.

If you're from outside Adobe, I suggest using our hooks or the new React Aria Components so you can control the rendering to meet your needs. https://react-spectrum.adobe.com/react-aria/index.html

[kaitoukid-1412]

hi @snowystinger

like in this case, if you don't set the line height, then you will get result like this

• w/o line-height
  
• w line-height
  
  

[snowystinger]

I don't quite follow why you need this change to the Spectrum component. Are you an Adobe employee? or working on a plugin or something else for the Adobe ecosystem?

If the answer is no to those, then I would keep my recommendation the same, I think you'd be better served by our hooks or React Aria Components to implement this yourself with your own styles, as you'd have full control over the rendering.

I also don't think we support 'ui-monospace' font-family in the Spectrum component, so I don't think we're worried about a case like this.

If it is for something fitting into the Adobe ecosystem, I'll need more information in order to pass along the ask to design. If you're an Adobe employee, it may be easier to reach out about this internally. If you're external, then I need more information about what you're trying to accomplish with this component. Whatever you can tell us is helpful. Is it for a RTE? what app is it trying to integrate with? etc

[kaitoukid-1412]

Hi,

First of all, I apologize for the late reply (UTC+7)

I mean I can't use the UNSAFE_style prop to personalize <textarea />. Not changing Spectrum component 😓

[snowystinger]

That is the Spectrum component. It's imported from @adobe/react-spectrum or @react-spectrum/textfield
Every component in those two scopes, @adobe and @react-spectrum, are Spectrum components https://react-spectrum.adobe.com/react-spectrum/index.html

The alternative is to make your own textarea using our hooks or react aria components, https://react-spectrum.adobe.com/react-aria/useTextField.html and the react aria component one is coming #4595

[kaitoukid-1412]

Thank you for your help @snowystinger ✨