如何使用 input[type="submit"] 属性将 CSS 转换为 Styled-Components？答案

【问题标题】：How do I convert CSS to Styled-Components with input[type="submit"] attribute?如何使用 input[type="submit"] 属性将 CSS 转换为 Styled-Components？
【发布时间】：2019-10-16 02:47:03
【问题描述】：

如何将具有“type”和“active”等特殊属性的标准 CSS 转换为 Styled-Components const？

.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  background: #fff;
  padding: 40px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

input[type='submit'] {
  background: #00aec9;
  color: #fff;
  cursor: pointer;
  margin-bottom: 0;
  text-transform: uppercase;
  width: 100%;
  border-radius: 5px;
  height: 35px;
  border-color: transparent;
  box-shadow: 0px;
  outline: none;
  transition: 0.15s;
  text-align: center;
}

input[type='submit']:active {
  background-color: #f1ac15;
}

我设法为 .box CSS 类创建了 const，但不确定如何使用“input[type='submit']”和“input[type='submit']:active”来实现这一点

//---- .box class ------ //
const DivBox = styled.div`
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  background: #fff;
  padding: 40px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
`

任何帮助将不胜感激

PS，我正在使用 React 和 Nextjs

我目前拥有的：

我想要什么：

我当前的组件代码：

import Layout from '../components/MyLayout.js'
import styled from 'styled-components'

const DivBox = styled.div`
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  background: #fff;
  padding: 40px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
`

const Input = styled.input.attrs({ type: 'submit' })`
  background: #00aec9;
  color: #fff;
  cursor: pointer;
  margin-bottom: 0;
  text-transform: uppercase;
  width: 100%;
  border-radius: 5px;
  height: 35px;
  border-color: transparent;
  box-shadow: 0px;
  outline: none;
  transition: 0.15s;
  text-align: center;
  &:active {
    background-color: #f1ac15;
  }
`

export default function About() {
  return (
    <Layout>
      <DivBox>
        <p>This is the about page</p>
        <h2>Sample Form</h2>
        <div className="form-label-group">
          <input
            type="email"
            id="inputEmail"
            className="form-control"
            placeholder="Email address"
            required
            autoFocus
          />
          <label htmlFor="inputEmail">Email address</label>
        </div>

        <div className="form-label-group">
          <input
            type="password"
            id="inputPassword"
            className="form-control"
            placeholder="Password"
            required
          />
          <label htmlFor="inputPassword">Password</label>
        </div>
        <div>
          <input type="submit" value="Submit" />
        </div>
      </DivBox>
    </Layout>
  )
}

附加 CSS：

.form-control:focus {
  border-color: #00aec9;
  box-shadow: 0 0 0 0.2rem rgba(19, 162, 228, 0.25);
}

.form-label-group input:not(:placeholder-shown) ~ label {
  color: #00aec9;
}

【问题讨论】：

标签： css reactjs next.js styled-components

【解决方案1】：

我想你可以通过以下方式实现：

const Input = styled.input.attrs({ 
  type: 'submit',
  value: 'Submit'
})`
  background: #00aec9;
  color: #fff;
  cursor: pointer;
  margin-bottom: 0;
  text-transform: uppercase;
  width: 100%;
  border-radius: 5px;
  height: 35px;
  border-color: transparent;
  box-shadow: 0px;
  outline: none;
  transition: 0.15s;
  text-align: center;
  &:active {
    background-color: #f1ac15;
  }
`

并替换

<input type="submit" value="Submit" />

与

<Input />

关于 attrs 的更多信息here

【讨论】：