javascript - 将 vanilla javascript 更改为 React 时的 CSS 问题
问题描述
我正在重建最初使用 vanilla javascript 编写的应用程序的前端，并将其更改为 React 框架。但出于某种原因，我在 HTML 元素的一些样式方面遇到了问题。具体来说，底部的文本区域大小不正确，底部的按钮大小也不正确，并且没有按应有的方式对齐。自从我使用 JSX 以来，我已将所有“类”属性更改为“类名”。我搜索了其他可能与 JSX 不同的拼写错误或其他属性，但我发现自己陷入了困境。
此页面也作为 400 x 500 电子窗口打开。当我加载原始 HTML 文件时，它工作得很好。
更新 5/3/2021 @ 3:43PM EST 所以我注意到在我的 JSX 文件中，textarea 不会接受我输入的内容作为 rows 和 cols 属性的值。此外，提交按钮 (id="submit_button") 不会接受按钮类中的任何 css，但取消按钮会。
原始 HTML 文件
<!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>
<body>
<div class="window_frame" id="frame">
<title id="window_title"> </title>
<button id="close" tabindex="-1"><svg width="40" height="30" xmlns="http://www.w3.org/2000/svg"><g><line stroke="#afafaf" stroke-width="1.25" id="svg_1" y2="6.4" x2="28.6" y1="23.6" x1="11.4" /><line stroke="#afafaf" stroke-width="1.25" id="svg_2" y2="23.6" x2="28.6" y1="6.4" x1="11.4"/></g></svg></button>
</div>
<form name="upload_feedback" id="feedback_form" onsubmit="return false">
<p>How would you rate your experience?</p>
<div class="star_rating" id="star_rating">
<input value="0" id="star0_exp" checked type="radio" name="rating_exp" class="visuallyhidden">
<label for="star0_exp">
<span class="visuallyhidden">0 Stars</span>
<svg viewBox="0 0 512 512">
</svg>
</label>
<input value="1" id="star1_exp" type="radio" name="rating_exp" class="visuallyhidden">
<label for="star1_exp">
<span class="visuallyhidden">1 Star</span>
<svg viewBox="0 0 512 512">
<path d="M512 198.525l-176.89-25.704-79.11-160.291-79.108 160.291-176.892 25.704 128 124.769-30.216 176.176 158.216-83.179 158.216 83.179-30.217-176.176 128.001-124.769z"></path>
</svg>
</label>
<input value="2" id="star2_exp" type="radio" name="rating_exp" class="visuallyhidden">
<label for="star2_exp">
<span class="visuallyhidden">2 Stars</span>
<svg viewBox="0 0 512 512">
<path d="M512 198.525l-176.89-25.704-79.11-160.291-79.108 160.291-176.892 25.704 128 124.769-30.216 176.176 158.216-83.179 158.216 83.179-30.217-176.176 128.001-124.769z"></path>
</svg>
</label>
<input value="3" id="star3_exp" type="radio" name="rating_exp" class="visuallyhidden">
<label for="star3_exp">
<span class="visuallyhidden">3 Stars</span>
<svg viewBox="0 0 512 512">
<path d="M512 198.525l-176.89-25.704-79.11-160.291-79.108 160.291-176.892 25.704 128 124.769-30.216 176.176 158.216-83.179 158.216 83.179-30.217-176.176 128.001-124.769z"></path>
</svg>
</label>
<input value="4" id="star4_exp" type="radio" name="rating_exp" class="visuallyhidden">
<label for="star4_exp">
<span class="visuallyhidden">4 Stars</span>
<svg viewBox="0 0 512 512">
<path d="M512 198.525l-176.89-25.704-79.11-160.291-79.108 160.291-176.892 25.704 128 124.769-30.216 176.176 158.216-83.179 158.216 83.179-30.217-176.176 128.001-124.769z"></path>
</svg>
</label>
<input value="5" id="star5_exp" type="radio" name="rating_exp" class="visuallyhidden">
<label for="star5_exp">
<span class="visuallyhidden">5 Stars</span>
<svg viewBox="0 0 512 512">
<path d="M512 198.525l-176.89-25.704-79.11-160.291-79.108 160.291-176.892 25.704 128 124.769-30.216 176.176 158.216-83.179 158.216 83.179-30.217-176.176 128.001-124.769z"></path>
</svg>
</label>
<output></output>
</div>
<p>How likely are you to recommend this app to other users?</p>
<div class="star_rating" id="star_rating">
<input value="0" id="star0" checked type="radio" name="rating" class="visuallyhidden">
<label for="star0">
<span class="visuallyhidden">0 Stars</span>
<svg viewBox="0 0 512 512">
</svg>
</label>
<input value="1" id="star1" type="radio" name="rating" class="visuallyhidden">
<label for="star1">
<span class="visuallyhidden">1 Star</span>
<svg viewBox="0 0 512 512">
<path d="M512 198.525l-176.89-25.704-79.11-160.291-79.108 160.291-176.892 25.704 128 124.769-30.216 176.176 158.216-83.179 158.216 83.179-30.217-176.176 128.001-124.769z"></path>
</svg>
</label>
<input value="2" id="star2" type="radio" name="rating" class="visuallyhidden">
<label for="star2">
<span class="visuallyhidden">2 Stars</span>
<svg viewBox="0 0 512 512">
<path d="M512 198.525l-176.89-25.704-79.11-160.291-79.108 160.291-176.892 25.704 128 124.769-30.216 176.176 158.216-83.179 158.216 83.179-30.217-176.176 128.001-124.769z"></path>
</svg>
</label>
<input value="3" id="star3" type="radio" name="rating" class="visuallyhidden">
<label for="star3">
<span class="visuallyhidden">3 Stars</span>
<svg viewBox="0 0 512 512">
<path d="M512 198.525l-176.89-25.704-79.11-160.291-79.108 160.291-176.892 25.704 128 124.769-30.216 176.176 158.216-83.179 158.216 83.179-30.217-176.176 128.001-124.769z"></path>
</svg>
</label>
<input value="4" id="star4" type="radio" name="rating" class="visuallyhidden">
<label for="star4">
<span class="visuallyhidden">4 Stars</span>
<svg viewBox="0 0 512 512">
<path d="M512 198.525l-176.89-25.704-79.11-160.291-79.108 160.291-176.892 25.704 128 124.769-30.216 176.176 158.216-83.179 158.216 83.179-30.217-176.176 128.001-124.769z"></path>
</svg>
</label>
<input value="5" id="star5" type="radio" name="rating" class="visuallyhidden">
<label for="star5">
<span class="visuallyhidden">5 Stars</span>
<svg viewBox="0 0 512 512">
<path d="M512 198.525l-176.89-25.704-79.11-160.291-79.108 160.291-176.892 25.704 128 124.769-30.216 176.176 158.216-83.179 158.216 83.179-30.217-176.176 128.001-124.769z"></path>
</svg>
</label>
<output></output>
</div>
<p>Please provide more information:</p>
<textarea name="feedback" form="feedback_form" spellcheck="false" id="feedback" name="feedback" label="Feedback" rows="8" cols="50" placeholder="Feedback" autofocus></textarea>
<div class="buttons">
<button type="button" id="cancel_feedback">Cancel</button>
<button type="submit" id="submit_button">Submit</button>
</div>
</form>
</body>
</html>
原始 JS 文件
const ipc = require('electron').ipcRenderer
//event handler to display window frame if platform isn't macos
ipc.on('display-frame', (event, title) => {
document.getElementById('frame').style.display = 'block'
document.getElementById('window_title').innerHTML = title
})
//event handler for creation attempt
document.getElementById('submit_button').addEventListener('click', () => {
//reset background color of the feedback form
document.getElementById('feedback').style.backgroundColor = "#4f4f4f"
//get feedback text
var feedbackText = document.getElementById('feedback').value
var feedbackStarsExp = 0;
var feedbackStarsRec = 0;
//get rating from stars
if (document.querySelector('input[name="rating_exp"]:checked') ) {
feedbackStarsExp = document.querySelector('input[name="rating_exp"]:checked').value;
}
if (document.querySelector('input[name="rating"]:checked') ) {
feedbackStarsRec = document.querySelector('input[name="rating"]:checked').value;
}
//send feedback info to main process
ipc.send('upload-feedback', {feedbackText: feedbackText, experienceRating: feedbackStarsExp,
recommendRating: feedbackStarsRec})
})
//event handlers for page close
document.getElementById('cancel_feedback').addEventListener('click', () => ipc.send('close-feedback-page'))
document.getElementById('close').addEventListener('click', () => ipc.send('close-feedback-page'))
JSX 文件
import React, { useState } from "react";
import { useSelector } from 'react-redux';
import WindowFrame from "../window_frame/WindowFrame.jsx";
import "./feedback.css";
const ipc = window.require("electron").ipcRenderer
const Feedback = () => {
const operatingSystem = useSelector((state) => state.operatingSystem)
const [experienceRating, setExperienceRating] = useState(0);
const [recommendRating, setRecommendRating] = useState(0);
const [feedbackText, setFeedbackText] = useState("");
console.log("EXP: ", experienceRating)
console.log("REC: ", recommendRating)
console.log("TEXT: ", feedbackText)
const handleFeedbackSubmit = (e) =>{
e.preventDefault()
ipc.send('upload-feedback', {
feedbackText: feedbackText,
experienceRating: experienceRating,
recommendRating: recommendRating
})
}
return (
<div>
{operatingSystem.indexOf('Mac') >= 0 ? null : <WindowFrame window="feedback"/>}
<form name="upload_feedback" id="feedback_form" onSubmit={(e) => handleFeedbackSubmit(e)}>
<p>How would you rate your experience?</p>
<div className="star_rating" id="star_rating" onChange={(e) => setExperienceRating(e.target.value)}>
<input value="0" id="star0_exp" checked type="radio" name="rating_exp" className="visuallyhidden"></input>
<label htmlFor="star0_exp">
<span className="visuallyhidden">0 Stars</span>
<svg viewBox="0 0 512 512"></svg>
</label>
<input value="1" id="star1_exp" type="radio" name="rating_exp" className="visuallyhidden"></input>
<label htmlFor="star1_exp">
<span className="visuallyhidden">1 Star</span>
<svg viewBox="0 0 512 512">
<path d="M512 198.525l-176.89-25.704-79.11-160.291-79.108 160.291-176.892 25.704 128 124.769-30.216 176.176 158.216-83.179 158.216 83.179-30.217-176.176 128.001-124.769z"></path>
</svg>
</label>
<input value="2" id="star2_exp" type="radio" name="rating_exp" className="visuallyhidden"></input>
<label htmlFor="star2_exp">
<span className="visuallyhidden">2 Stars</span>
<svg viewBox="0 0 512 512">
<path d="M512 198.525l-176.89-25.704-79.11-160.291-79.108 160.291-176.892 25.704 128 124.769-30.216 176.176 158.216-83.179 158.216 83.179-30.217-176.176 128.001-124.769z"></path>
</svg>
</label>
<input value="3" id="star3_exp" type="radio" name="rating_exp" className="visuallyhidden"></input>
<label htmlFor="star3_exp">
<span className="visuallyhidden">3 Stars</span>
<svg viewBox="0 0 512 512">
<path d="M512 198.525l-176.89-25.704-79.11-160.291-79.108 160.291-176.892 25.704 128 124.769-30.216 176.176 158.216-83.179 158.216 83.179-30.217-176.176 128.001-124.769z"></path>
</svg>
</label>
<input value="4" id="star4_exp" type="radio" name="rating_exp" className="visuallyhidden"></input>
<label htmlFor="star4_exp">
<span className="visuallyhidden">4 Stars</span>
<svg viewBox="0 0 512 512">
<path d="M512 198.525l-176.89-25.704-79.11-160.291-79.108 160.291-176.892 25.704 128 124.769-30.216 176.176 158.216-83.179 158.216 83.179-30.217-176.176 128.001-124.769z"></path>
</svg>
</label>
<input value="5" id="star5_exp" type="radio" name="rating_exp" className="visuallyhidden"></input>
<label htmlFor="star5_exp">
<span className="visuallyhidden">5 Stars</span>
<svg viewBox="0 0 512 512">
<path d="M512 198.525l-176.89-25.704-79.11-160.291-79.108 160.291-176.892 25.704 128 124.769-30.216 176.176 158.216-83.179 158.216 83.179-30.217-176.176 128.001-124.769z"></path>
</svg>
</label>
<output></output>
</div>
<p>How likely are you to recommend this app to other users?</p>
<div className="star_rating" id="star_rating" onChange={(e) => setRecommendRating(e.target.value)}>
<input value="0" id="star0" type="radio" name="rating" className="visuallyhidden"></input>
<label htmlFor="star0">
<span className="visuallyhidden">0 Stars</span>
<svg viewBox="0 0 512 512"></svg>
</label>
<input value="1" id="star1" type="radio" name="rating" className="visuallyhidden"></input>
<label htmlFor="star1">
<span className="visuallyhidden">1 Star</span>
<svg viewBox="0 0 512 512">
<path d="M512 198.525l-176.89-25.704-79.11-160.291-79.108 160.291-176.892 25.704 128 124.769-30.216 176.176 158.216-83.179 158.216 83.179-30.217-176.176 128.001-124.769z"></path>
</svg>
</label>
<input value="2" id="star2" type="radio" name="rating" className="visuallyhidden" ></input>
<label htmlFor="star2">
<span className="visuallyhidden">2 Stars</span>
<svg viewBox="0 0 512 512">
<path d="M512 198.525l-176.89-25.704-79.11-160.291-79.108 160.291-176.892 25.704 128 124.769-30.216 176.176 158.216-83.179 158.216 83.179-30.217-176.176 128.001-124.769z"></path>
</svg>
</label>
<input value="3" id="star3" type="radio" name="rating" className="visuallyhidden"></input>
<label htmlFor="star3">
<span className="visuallyhidden">3 Stars</span>
<svg viewBox="0 0 512 512">
<path d="M512 198.525l-176.89-25.704-79.11-160.291-79.108 160.291-176.892 25.704 128 124.769-30.216 176.176 158.216-83.179 158.216 83.179-30.217-176.176 128.001-124.769z"></path>
</svg>
</label>
<input value="4" id="star4" type="radio" name="rating" className="visuallyhidden" ></input>
<label htmlFor="star4">
<span className="visuallyhidden">4 Stars</span>
<svg viewBox="0 0 512 512">
<path d="M512 198.525l-176.89-25.704-79.11-160.291-79.108 160.291-176.892 25.704 128 124.769-30.216 176.176 158.216-83.179 158.216 83.179-30.217-176.176 128.001-124.769z"></path>
</svg>
</label>
<input value="5" id="star5" type="radio" name="rating" className="visuallyhidden"></input>
<label htmlFor="star5">
<span className="visuallyhidden">5 Stars</span>
<svg viewBox="0 0 512 512">
<path d="M512 198.525l-176.89-25.704-79.11-160.291-79.108 160.291-176.892 25.704 128 124.769-30.216 176.176 158.216-83.179 158.216 83.179-30.217-176.176 128.001-124.769z"></path>
</svg>
</label>
<output></output>
</div>
<p>Please provide more information</p>
<textarea name="feedback" form="feedback_form" spellcheck="false" id="feedback" label="Feedback" cols={50} rows={8} placeholder="Feedback" autofocus onChange={(e) => setFeedbackText(e.target.value)} />
<div className="buttons">
<button type="button" id="cancel_feedback" onClick={() => ipc.send('close-feedback-page')}>Cancel</button>
<button type="submit" id="submit_button">Submit</button>
</div>
</form>
</div>
)
}
export default Feedback;
CSS 文件
@import "../../styles/fonts.css";
@import "../window_frame/window_frame.css";
p {
color: #efefef;
font-size: 13px;
margin: 20px 30px;
}
form {
font-family: "Open Sans";
color: #efefef;
font-weight: 300;
font-size: 11px;
}
.star_rating{
display:flex;
justify-content:space-evenly;
}
#feedback {
margin: 10px 30px;
outline: none;
border: none;
background-color: #4f4f4f;
font-family: "Open Sans";
font-weight: 400;
font-size: 12px;
color: #efefef;
resize: none;
}
.buttons button {
margin: 20px 30px;
outline: none;
border: none;
border-radius: 2px;
width: 80px;
height: 25px;
background-color: #2f2f2f;
font-weight: 300;
font-size: 12px;
font-family: "Open Sans";
color: #efefef;
text-align: center;
cursor: pointer;
}
.buttons button:hover {
background-color: #3f3f3f !important;
}
.buttons button:active {
background-color: #4f4f4f !important;
}
#star_rating svg {
width: 0.5em;
height: 0.5em;
fill: currentColor;
stroke: currentColor;
}
#star_rating label, #star_rating output {
display: block;
float: left;
font-size: 2em;
height: 1.2em;
color: rgb(238, 219, 111);
cursor: pointer;
/* Transparent border-bottom avoids jumping
when a colored border is applied
on :hover/:focus */
border-bottom: 2px solid transparent;
}
#star_rating output {
font-size: 1.5em;
padding: 0 1em;
}
#star_rating input:checked ~ label {
color: #999;
}
#star_rating input:checked + label {
color: rgb(238, 219, 111);;
}
#star_rating:hover input + label {
color: rgb(238, 219, 111);;
}
#star_rating input:hover ~ label,
#star_rating input:focus ~ label,
#star_rating input[id="star0"] + label {
color: #999;
}
#star_rating input:hover + label,
#star_rating input:focus + label {
color:rgb(238, 219, 111);;
}
.visuallyhidden {
position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px; width: 1px;
margin: -1px; padding: 0; border: 0;
}
.buttons{
display:flex;
justify-content:space-evenly;
}
#submit_button:focus, #cancel_feedback:focus{
background-color: #3f3f3f;
}
#submit_button:hover, #cancel_feedback:hover {
background-color: #3f3f3f;
}
#submit_button:active, #cancel_feedback:active {
background-color: #4f4f4f;
}
解决方案
所以我对 React 比较陌生，我没有意识到的一件事是其他 CSS 文件正在影响我正在处理的当前页面。
我有另一个名为“issue_reporter”的页面，它有自己的 CSS 文件，我在其中为所有文本区域设置了样式。即使我没有将此 CSS 文件导入这些页面，这种样式也会影响我使用 textarea 的所有其他页面。
我能够通过更改“issue_reporter”中的样式以仅影响其 id 而不是所有文本文件来解决此问题。我为按钮做了类似的事情。
所以在我的 issue_reporter.css 文件中，这个......
**textarea**{
overflow: auto;
width: 94%;
height: 80px;
resize: none;
font-size: 12px;
font-family: 'Open Sans';
color: #efefef;
background-color: #2f2f2f;
border: none;
outline: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
padding: 10px;
margin-top: 10px;
}
变成了这个……
**#issue_step** {
overflow: auto;
width: 94%;
height: 80px;
resize: none;
font-size: 12px;
font-family: 'Open Sans';
color: #efefef;
background-color: #2f2f2f;
border: none;
outline: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
padding: 10px;
margin-top: 10px;
}
推荐阅读
- javascript - 为什么我的查询不明确？Knex 和 Postgres
- apache-spark - ClickHouse 作为 Apache Spark 的存储引擎
- class - 数据类与没有主体的类有何不同？
- python - Numpy函数获取对应于给定值的分位数
- batch-file - 如何在 cmd 循环中使用通配符“*”回显项目？
- c++ - 如何构造带有常规函数参数的 C++ 可变参数函数
- flutter - 'FormatException: Unexpected character (at character 3)' cerror mapping api response to my state class。任何人都可以解决这个问题吗？
- php - 变量在 dd 上显示，但在 json 资源 laravel 上没有呈现
- if-statement - 对 MIPS 中的 if 跳转感到困惑
- java - 附加