标签: css-in-js

我是风格组件的新手。我想通过将 props 传递给组件来设置输入宽度。预期输出应该是：

<Input width=30px> or <Input width=100%> 

这是我的组件：

import styled from "styled-components"

const UIInput = styled.input`
  padding: 5px;
  width: ${props => props.width ? width : 'auto'}
`

export default UIInput

.underline {
  background-color: dodgerblue;
  display: inline-block;
  height: 2px;
  left: 50px;
  margin-top: -4px;
  position: absolute;
  top: 185px;
  -webkit-transform: scale(0, 1);
  transform: scale(0, 1);
  -webkit-transition: all 0.5s linear;
  transition: all 0.5s linear;
  width: 202px;
}

https://codepen.io/xyaraj/pen/amzydG

我在 React 应用程序中使用 JS 中的 CSS，我想知道如何将-webkit-transitioncss 等属性放入 js 中。

const useStyles = makeStyles(() => ({
    icon: {
        padding: '.2rem .2rem',
        fontSize: '12px'
    },
    li: {
        display: 'block',
        font: 'bold 6px/12px sans-serif',
        padding: '5px 15px',
        textAlign: 'center',
        textDecoration: 'none',
        float: 'left',
    },
}

上面的代码是我在JS中使用CSS，我想知道如何添加下划线类并添加属性-webkit-transform …

我正在使用 Material UI，并且想使用多个规则名称和样式化 API来设置组件的样式来设置组件的样式。

假设我想设置FormLabel 组件的样式设置为蓝色，并将星号（必需）设置为红色。

使用Hook API我会做类似的事情：

import React from 'react'
import { makeStyles } from '@material-ui/core/styles'
import MuiFormLabel from '@material-ui/core/FormLabel'

const useStyle = makeStyles({
  root: {
    color: 'blue'
  },
  asterisk: {
    color: 'red'
  },
})

const FormLabel = ({ children }) => {
  const classes = useStyle()
  return (
    <MuiFormLabel
      classes={{
        root: classes.root,
        asterisk: classes.asterisk
      }}
    >
      {children}
    </MuiFormLabel>
  )
}

我可以通过root并且asterisk使用样式化 API

我试过了，但没用

import React from 'react' …

这是另一个很好的 stackoverflow 帖子的链接，我的最初答案就是基于该帖子。我正在尝试设计我的 ReactSelect 组件，使其看起来像这样：

从上面的屏幕截图来看，这一点并不明显，但选择框的高度（总共 29 像素）比默认的 ReactSelect 小得多，这是我的第一个样式目标（降低高度）。这是我现在尝试降低高度的代码，主要来自我链接到的 stackoverflow 帖子：

const customStyles = {
    control: base => ({
        ...base,
        height: 22,
        minHeight: 22
    })
};

const customControlStyles = base => ({
    ...base,
    height: 22,
    minHeight: 22
});

const selectOptions = [
    { value: 'pct', label: 'FG Percentage' },
    { value: 'attFreq', label: 'FG Frequency' },
    { value: 'made', label: 'Total Makes' },
    { value: 'att', label: 'Total Attempts' }];

const shotdistSelect =
    (<Select
        // arrowRenderer={null}
        maxMenuHeight={30}
        placeholder={'Knickerbockers'} …

我有一个使用样式化组件创建的导航栏组件。我想创建一些可以更改背景颜色和/或文本颜色的道具。

例如： <Navbar dark>应该具有以下CSS：

background: #454545;
color: #fafafa;

而<Navbar light>应该相反：

background: #fafafa;
color: #454545;

但是，如果没有使用任何道具，那么我想使用默认的背景和文本颜色-例如（出于演示目的），如下所示：

background: #eee;
color: #333;

现在，我的问题是如何在样式化组件中进行设置。

我可以执行以下操作：

background: ${props => props.dark ? #454545 : '#eee'}
background: ${props => props.dark ? #fafafa : '#eee'}
background:  #eee;

和类似的颜色。

但这是多余的，不是很优雅。我想要某种if / else语句：

background: ${ props => { 
  if (props.dark) { #454545 }
  elseif (props.light) { #fafafa }
  else { #eee }
}

但是我不知道如何在样式化组件中设置类似的内容。

有什么建议么？

提前致谢。

使用 Svelte，我想要完成的是能够html使用我拥有css的post对象的属性来设计我的样式。

我想，没问题，只需在我的svelte:headwith 中添加一个样式标签{post.css}。它会将我的post.css数据直接放入样式标签中，viola'，问题解决了。但是，不，问题没有解决。当我在浏览器中查看元素时，我看到

<style>{post.css}</style>

代替

<style>
  p{
    color: purple;
    font-weight: 900;
  }
 </style>

我创建了一个解决办法，我在那里设置innerText了的<style>后标签onMount，但我不喜欢它，宁愿做它一个更清洁的方式。

我想要的是…

<script>
  export let post = {
    html: `<p>This is purple</p>`,
    css : `
      p{
        color: purple;
        font-weight: 900;
      }
    `
    }  
</script>

<svelte:head>
  <style>{post.css}</style>
</svelte:head>

{@html post.html}

我必须做些什么才能让它发挥作用……

<script>
  import { onMount } from "svelte";

  export let post = {
    html: `<p>This is purple</p>`,
    css : …