如何将含type、active特殊属性的CSS转换为Styled-Components常量？

Hey there! Let's convert those remaining styles into styled-components and get your form working as expected. I'll break this down step by step:

1. Fix the Submit Button Implementation #

You've already got the right idea for the submit input's styled-component, but you just need to replace the native <input type="submit"> in your JSX with your custom Input component. Also, I adjusted the box-shadow value from 0px to none for clarity, and added a semicolon to the :active state for proper syntax:

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: none;
  outline: none;
  transition: 0.15s;
  text-align: center;

  &:active {
    background-color: #f1ac15;
  }
`

Then in your JSX, replace this:

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

With your custom component:

<Input value="Submit" />

2. Convert .form-control and .form-label-group Styles #

Next, create styled-components for your form inputs and label groups to handle the focus state and floating label behavior:

const FormControl = styled.input`
  /* Base input styles to match typical form behavior */
  width: 100%;
  padding: 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;

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

const FormLabelGroup = styled.div`
  position: relative;
  margin-bottom: 1rem;

  label {
    position: absolute;
    top: 0;
    left: 0;
    padding: 0.75rem 0.75rem;
    pointer-events: none;
    transition: all 0.1s ease-in-out;
    color: #6c757d; /* Default label color */
  }

  /* Target label when input isn't showing placeholder */
  ${FormControl}:not(:placeholder-shown) ~ label {
    color: #00aec9;
    /* Optional: Add positioning for a polished floating label effect */
    top: -0.5rem;
    left: 0.75rem;
    font-size: 0.75rem;
    background-color: #fff;
    padding: 0 0.25rem;
  }
`

3. Full Updated Component Code #

Here's your complete component with all styled-components integrated, replacing the old class-based elements:

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: none;
  outline: none;
  transition: 0.15s;
  text-align: center;

  &:active {
    background-color: #f1ac15;
  }
`

const FormControl = styled.input`
  width: 100%;
  padding: 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;

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

const FormLabelGroup = styled.div`
  position: relative;
  margin-bottom: 1rem;

  label {
    position: absolute;
    top: 0;
    left: 0;
    padding: 0.75rem 0.75rem;
    pointer-events: none;
    transition: all 0.1s ease-in-out;
    color: #6c757d;
  }

  ${FormControl}:not(:placeholder-shown) ~ label {
    color: #00aec9;
    top: -0.5rem;
    left: 0.75rem;
    font-size: 0.75rem;
    background-color: #fff;
    padding: 0 0.25rem;
  }
`

export default function About() {
  return (
    <Layout>
      <DivBox>
        <p>This is the about page</p>
        <h2>Sample Form</h2>
        <FormLabelGroup>
          <FormControl 
            type="email" 
            id="inputEmail" 
            placeholder="Email address" 
            required 
            autoFocus 
          />
          <label htmlFor="inputEmail">Email address</label>
        </FormLabelGroup>
        <FormLabelGroup>
          <FormControl 
            type="password" 
            id="inputPassword" 
            placeholder="Password" 
            required 
          />
          <label htmlFor="inputPassword">Password</label>
        </FormLabelGroup>
        <div>
          <Input value="Submit" />
        </div>
      </DivBox>
    </Layout>
  )
}

Quick Notes: #

• I added base styles to FormControl to match standard form input behavior—feel free to adjust padding, font sizes, or borders to fit your design.
• The floating label positioning in FormLabelGroup is optional but adds a polished touch; you can remove or tweak those values if you don't need it.

内容的提问来源于stack exchange，提问作者Stephan Du Toit