我在 Next.js 中设置 html 表单元素的样式时遇到了问题。我无法使用导入的 CSS 样式表中的简单类名来使 CSS 工作，但我使用内联样式成功了

style={{                   
    width: "300px",
    height: "50px",
    paddingLeft: "10px",
    paddingTop: "5px",
    border: "none", 
}}

问题是，当我选择表单时，它会添加不需要的内边框。我需要添加一个 input:selected {border: "none"} 样式。我读到这是内联样式的限制，我必须使用 CSS-in-JS 库。恰好 Next.js 有一个 内置库 可以做到这一点。不幸的是，使用该库无法覆盖和设置我的输入样式。我已经测试过并成功使用此库对其他元素进行了处理，但是，输入元素不起作用。这是我所拥有的：

            <form className="subscribeInput" style={{ paddingBottom: "100px" }}>
              <input
                style={{}}
                type="text"
                id="email"
                name="email"
                placeholder=" Email Address"
              />
              <style jsx>{`
                subscribeInput input[type="text"] {
                  width: "300px";
                  height: "50px";
                  padding-left: "10px";
                  padding-top: "5px";
                  border: "none";
                }
              `}</style>
              <button
                style={{
                  width: "100px",
                  height: "50px",
                  borderColor: "white",
                  paddingLeft: "10px",
                  paddingTop: "5px",
                  backgroundColor: "black",
                  marginLeft: "20px",
                  color: "white",
                }}
                type="submit"
              >
                {" "}
                Signup{" "}
              </button>
            </form>

而我尝试了选择器的几个变体：

• subscribeInput {
• subscribeInput input {
• input {
• input[type="text"]

最后，如果与此相关，我的提交按钮上的边框不会按照指示完全变为“白色”。相反，它的顶部和左侧边框为白色，右侧和底部边框为浅灰色。我附上了一张显示问题的屏幕截图。它添加了内联样式，内边框在选择后显示，并存在灰色边框问题。