标签: css-in-js

我正在使用样式组件 CSS-in-JS 设计我的 Gatsby.js 网站。

styled-components 是否可以让我的 CSS 跨浏览器兼容？

例如，假设我正在设计一个表单。对于传统的 CSS，我会做类似的事情：

button, input, select, textarea {
  margin: 0;
  width: 100%;
       border-sizing: border-box;
     -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

对于样式组件，我想这样做：

const Form = styled.form`
  button, input, select, textarea {
    margin: 0;
    width: 100%;
    box-sizing: border-box;
  }
`

我可以省略这些-moz或-webkit声明并仍然得到跨浏览器兼容的 CSS 吗？

这似乎是一种最佳实践，因为几乎所有地方都在使用它。但是，没有地方清楚地说明它的确切作用...

我确实在文档中找到一条注释，其中说：“此注释告诉babel将jsx转换为对名为jsx的函数的调用，而不是React.createElement”。这是否仅仅意味着它用Emotion取代了标准的React功能？省略/ ** @jsx jsx * /注释是否有任何后果？

我用react-jss用material-ui，现在一会儿。material-ui 3.x -> 4.x 迁移指南说 MUI 4 与 React JSS 9.x 不兼容：

https://material-ui.com/guides/migration-v3/

此外，该react-jss项目似乎已存档：

https://github.com/cssinjs/react-jss

...但 JSS 至少要到第 10 版：

https://cssinjs.org/?v=v10.0.0-alpha.16

所以我对如何在 MUI 4 中使用 React-JSS 感到完全困惑。导入是不是"react-jss": "8.6.1",in之外的东西package.json？我应该切换到情感组件还是样式组件？如此迷茫。

我现在一直在兜圈子，试图了解正在发生的事情。我正在使用 Tailwind 的故事书制作一个设计库。我似乎无法让 :before 伪类工作。无论我将它放置在样式中的哪个位置，它都永远不会被渲染。

一个例子是我正在尝试制作一个使用react-slick的组件，并且想要设置导航的样式：

'& .slick-dots': {
  bottom: -30,
  display: 'block',
  left: 4,
  listStyle: 'none',
  margin: 0,
  padding: 0,
  position: 'absolute',
  textAlign: 'center',
  width: '100%',

  '& li': {
    cursor: 'pointer',
    display: 'inline-block',
    height: 20,
    margin: '0 5px',
    padding: 0,
    position: 'relative',
    width: 20,

     '& button': {
       border: 0,
       background: 'transparent',
       display: 'block',
       height: 20,
       width: 20,
       outline: 'none',
       lineHeight: 0,
       fontSize: 0,
       color: 'transparent',
       padding: 5,
       cursor: 'pointer',

       '&:before': {
        position: 'absolute',
        top: 0,
        left: 0,
        content: '', …

如何覆盖具有高特异性的类的规则？

例如，AccordionSummary 中的.MuiAccordionSummary-content.Mui-expanded类

const useStyles = makeStyles(() => ({
    expanded: {
        marginBottom: 0,
    },
}));

结合：

const useStyles = makeStyles(() => ({
    expanded: {
        marginBottom: 0,
    },
}));

被应用但被覆盖。

注意：marginBottom: '0 !important'有效，但感觉不是最佳解决方案。

我正在尝试为TextField我正在处理的应用程序中的组件设置背景颜色，但是似乎当我style={{background: "rgb(232, 241, 250)"}}使用自定义 RGB 值添加到该组件时，它会将它们显示在默认的灰色背景颜色之上。

背景颜色应该与上述组件中的浅蓝色相同：

1. 我试图通过style向它添加属性来解决它

2. 此外，通过添加makeStyles()到组件并通过className

在这两种情况下，我都得到了如上面截图所示的输出。

3. 我能够通过将variant=filled其删除或设置为standard或来获得正确的背景颜色outlined，但随后文本周围的填充将被删除。

我真的不明白这是什么问题以及如何实际解决？

import React from "react";
import {TextField} from "@material-ui/core";

import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles((theme) => ({
     root: {
         background: 'rgb(232, 241, 250)'
      },
}));

export interface InquiryContentInputProps {
   content: string;
   onChange: (content: string) => void;
}

export function InquiryContentInput(props: InquiryContentInputProps) {
   const classes = useStyles();

   return (
       <TextField
          variant="filled" …

我正在使用 react-jss 构建一个应用程序来为我的组件设置样式，并想知道是否可以向顶级元素（如html或body）添加样式。

为了说明这一点，我有这个简单的 NotFound 组件，我用 react-jss 对其进行了样式设置。样式工作正常，但问题是body元素有一个我想删除的默认边距。

NotFound.js

import React from 'react';
import injectSheet from 'react-jss';

const styles = {
    notFound: {
        fontFamily: 'Roboto',
        backgroundColor: 'blue',
        color: 'white'
    }
}

function NotFound({ classes }) {
  return (
    <div className={classes.notFound}>
      NOT FOUND
    </div>
  )
}

export default injectSheet(styles)(NotFound);

有谁知道是否可以使用 css-in-js 删除此边距？（我想避免使用 css）

我在以下位置使用情感样式：

import styled from '@emotion/styled'

我正在尝试将props传递给指南中提到的样式化组件：

https://emotion.sh/docs/styled

由于某种原因，它不起作用。我也使用TypeScript。我在这里将道具传递给名为StyleWrapper的样式化组件：

const ex: React.FunctionComponent<exProps> = props => {
  return (
    <StyleWrapper someNumber = {props.someNumber}
...
    </StyleWrapper >
  )
}

在StyleWrapper中：

const ToolsHeaderColumn = styled.div`
  padding-top: ${props => props.someNumber };
`

我得到的是编译错误：

"Property 'someNumber ' does not exist on type 
'Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, 
HTMLDivElement>, "children" | "style" | "title" | 
"color" | "hidden" | "defaultChecked" | "defaultValue" |     "suppressContentEditableWarning" | ... 243 more ... 
| "css"> & { ...; }'.ts(2339)
"

我想声明一些我将在我的组件中重用的 css 变量。这是你如何用普通的 css 来做到这一点：

:root {
  --box-shadow: 0 2px 5px -1px rgba(0, 0, 0, 0.3);
}

然后将按如下方式使用：

.my-class {
  box-shadow: var(--box-shadow);
}

如何使用 useStyles 实现相同的效果？我尝试了以下无济于事：

const theme = createMuiTheme({
  shadowing: {
    boxShadow: "0 2px 5px -1px rgba(0, 0, 0, 0.3)",
  }
});

我的主应用程序包含在

<ThemeProvider theme={theme}>
  <App />
</ThemeProvider>

我尝试在我的组件中使用它：

const useStyles = makeStyles(theme => ({
  workImage: {
    boxShadow: theme.shadowing,
  },
}));

但它不起作用。

我面临的问题是，当我使用 Antd CSS 重新加载 Next.js 中的页面时，应用 CSS 样式会出现延迟。换句话说，重新加载页面时不会立即应用样式，这会导致一些视觉不一致。如何解决这个问题并确保 Antd CSS 立即应用？

我知道这是因为SSR的原因，在读取JS时没有应用CSS，但我无法解决它。

版本

• 下一个.js：12
• 蚂蚁：5

动图描述

• 点击查看图片说明。

我尝试遵循此存储库，但没有成功

https://github.com/ant-design/create-next-app-antd/blob/main/pages/_document.tsx