Currently, I am working on revamping the frontend of an app that was initially built with vanilla javascript and transitioning it to a React framework. However, I'm encountering some challenges with styling the HTML elements. Specifically, the textarea at the bottom is not the right size, and the buttons at the bottom are misaligned and incorrect in size. After changing all "class" attributes to "className" for JSX compatibility, I've been unable to resolve these issues despite checking for typos or differences in JSX attributes.
This page is displayed as a 400 x 500 electron window. It functions perfectly when loading the original HTML file.
Update 5/3/2021 @ 3:43 PM EST Upon further inspection of my JSX file, I discovered that the textarea does not accept the entered values for rows and cols attributes. Additionally, the submit button (id="submit_button") does not apply any CSS from the buttons class, while the cancel button does.
Original HTML File
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Feedback</title>
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
<link rel="stylesheet" href="./styles/feedback.css"/>
<script defer src="../src/feedback.js"></script>
</head>
...