Question

我有一个简单的反应HTML输入组件，因为它在不同的部分/页面上使用，我添加了一些道具来设置它及其占位符。问题是有时我在编译时遇到错误（我们使用的是nextjs）。这段代码：

{placeHolderColor && (<style jsx>{`input::placeholder{color:${placeHolderColor}}`}</style>)}

基本上，我在渲染函数中使用inline If with Logical && Operator来检查道具 placeHolderColor 是否存在，如果存在则添加样式标记。< / p>

我得到的错误：

警告：标记上的未知道具jsx。从元素中删除此道具。

只有在重新加载页面时才会出现此错误。如果您进行了更改并且热代码重新加载运行，则没有错误。不确定问题是文字内部的var，':: placeholder'伪元素还是什么。无论如何代码都有效，如果定义了 placeHolderColor var，则应用样式。

Answer 1

当我测试你的代码时，我得到了同样的错误（也是在页面加载时）。之后我在ZEIT的#next松弛频道https://zeit.chat/上与一个带有昵称@g（在github @giuseppeg上）的样式jsx dev进行了交谈，他确认不支持有条件使用<style jsx>标签。以下是他的解释https://github.com/zeit/styled-jsx/issues/233。

此外，删除条件后，只需插入您的标记：

<style jsx>{'input::placeholder{color:${placeHolderColor}}'}</style>

我有这个错误：

模块构建失败：SyntaxError：预期的placeHolderColor不是来自最近的范围。样式化JSX鼓励使用常量而不是通过内联样式或className切换更好地设置的道具或动态值。请参阅https://github.com/zeit/styled-jsx#dynamic-styles。

根据https://github.com/zeit/styled-jsx#dynamic-styles的建议，你基本上不应该在<style jsx>标签内的模板文字中添加动态值（尽管你可以从版本1.0.4开始放置常量和常量表达式（参见UPDATE at详细答案的底部））。根据松弛线程https://zeit-community.slack.com/archives/C2U01UYEA/p1496928897076534中的@giuseppeg评论，禁止使用道具/动态值的原因如下：“目前，styled-jsx编译并生成静态代码，因此产生最终的哈希值当color之类的变量值改变“

时，CSS唯一不会改变

因此，正如您从文档中看到的那样，建议通过内联样式或className切换使用动态值。不幸的是，在React中通过内联样式设置伪元素（占位符等）是不可能的，所以如果你有可能的颜色数量有限，那么为每个颜色案例创建一个类并使用它如下：

const InputWithColouredPlaceholder = props => (
  <div>
    <input
      placeholder="text"
      className={
        'placeholderColourClass' in props && props.placeholderColourClass
      }
    />
    <style jsx>{`
       .reddy::placeholder {
         color: red;
       }
       .greeny::placeholder {
         color: green;
       }
     `}</style>
  </div>
);

并将其渲染为<InputWithColouredPlaceholder placeholderColourClass="reddy" />

但是在大范围的可能颜色的情况下会变得更复杂。在这种情况下，我建议在ZEIT松弛https://zeit.chat/的#next频道中寻求建议。

<强>更新在模板文字中使用常量和常量表达式应该在styled-jsx 1.0.4中工作（但是nextjs目前依赖于1.0.3，并且styled-jsx的单独安装将无济于事，所以请等待nextjs的更新以支持样式化的jsx 1.0。 4）。这意味着任何未通过props而不是在组件内部创建的常量应该有效（例如，您可以使用带有颜色常量的js文件并将它们导入到输入组件中）。但它不适合你的情况因为你需要一种动态的方式。

Answer 2

我收到错误Warning: Unknown prop 'jsx' on <style> tag. Remove this prop from the element. For details, see FB react-unknown-prop.样式标记中的jsx属性是什么意思？只是删除它？

jsx上占位符出错

2 个答案: