带有情感 js 的样式占位符文本

Question

目前，placeholder="Your best email" 未按样式设置样式：inputText。

检查元素时，user agent stylesheet 被用于 input, textarea, select, button {}。

下面是我的代码：

import React from "react";
import {css} from "@emotion/core";

const inputText = css`
  ::placeholder {
    float: left;
    height: 35px;
    width: 230px;
    color: #FFF;
    font-family: "Work Sans";
    font-size: 30px;
    font-weight: 700;
    line-height: 35px;
  }
`

const inputRound = css`
  box-sizing: border-box;
  height: 85px;
  width: 460px;
  border-radius: 100px;
  border: 5px solid #FFF;
  background-color: transparent;
  outline: none;
`

const Subscribe = () => (
   <div css={{
     display: 'flex'
   }}>
      <h2>Stay tuned</h2>
      <form name="subscribe" method="POST" data-netlify="true">
        <p css={inputText}>
          <input placeholder="Your best email" type="email" name="email" css={inputRound}/>
        </p>
        <p >
          <button type="submit"><h3>Subscribe</h3></button>
        </p>
      </form>
    </div>
)

export default Subscribe

什么阻止应用 inputText 样式？

这是来自开发工具的屏幕截图（PS inputText 已按照建议更改为 & > ::placeholder。

Answer 1

您必须将 inputText 样式直接应用于输入：

// Change this
- <p css={inputText}>
-   <input css={inputRound}/>
- </p>

//to this
+ <p>
+   <input css={[inputText, inputRound]}/>
+ </p>

或者，或者，从 inputText:

定位子输入

const inputText = css`
  & > input::placeholder {
    ...
  }
`

Answer 2

如果你想为输入的占位符设置样式，你可以这样做（这段代码只是为了举例）：

input: css`
      width: 100px
      border: 1px solid rgba(0, 0, 0, 0.1);
      border-radius: 3px;

      &::placeholder {
        color: red;
      }
    `,

带有情感 js 的样式占位符文本

Styling placeholder-text with emotion js

html

javascript

css

emotion