css - 如何将 CSS 转换为具有 input[type ="submit"] 属性的样式组件？

Question

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

.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 类创建了常量，但不确定如何使用“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;
}

Answer 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