Как преобразовать CSS в Styled-Components с атрибутом input [type = "submit"]? - PullRequest
Новая
       22

Как преобразовать CSS в Styled-Components с атрибутом input [type = "submit"]?

0 голосов
/ 30 мая 2019

Как преобразовать стандартный CSS со специальными атрибутами, такими как "тип" и "активный", в константы Styled-Components? 

.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;
}

Мне удалось создать const для CSS-класса .box, но я не был уверен, как этого добиться с помощью "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

Что у меня сейчас есть:

enter image description here

Что я хочу:

enter image description here

Мой текущий код компонента: 

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;
}

1 Ответ

1 голос
/ 30 мая 2019

Полагаю, вы можете достичь этого: 

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 />

Больше информации об атрибутах здесь

...