我不能访问我需要样式化的元素，并且它上面没有类名或it。如何使用CSS-in-JS定位HTML元素？例如： svg path {
fill: red;
}
浏览 21提问于2020-07-24得票数 0
我是个新手，我想知道为什么我的自定义实用程序没有被应用。 // tailwindcss.config.js
const plugin = require("tailwindcss/plugin");
module.exports = {
purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
darkMode: false, // or 'media' or 'class'
theme: {
浏览 13提问于2021-04-03得票数 1
我不明白为什么stylelint会在ignoreFiles配置中忽略.js文件。 因为stylelint是一个帮助你避免错误并在你的样式中执行约定的工具。所以它应该只关注.css，.less和.scss文件，为什么我应该像这样忽略.js文件呢？ {
"ignoreFiles": ["**/*.js"]
} 也许默认情况下它应该忽略js文件？
浏览 16提问于2021-09-02得票数 0
我开始学习React，并进入了解释CSS模块如何用于自动创建不会在组件之间冲突的类名的部分。
但是当使用SCSS或SASS时，我们可以将所有代码包装在一个" component“类中，使其下的任何内容对于该组件都是唯一的，例如，如果您有以下SCSS文件：
.Person {
.enabled {
background-color: green;
}
}
"enabled“类将仅应用于Person组件内的元素(假设您已将"Person”类分配给组件)
那么，这会使CSS模块变得无用吗？或者，当同时使用SCSS和SASS时，使用CSS模块还有
浏览 0提问于2020-04-09得票数 0
我希望能够在Next.js应用程序中重写react-bootstrap (Sass)。我在React应用程序中工作得很好，但在Next.js中却没有成功。我不希望它是全局设置的，也不是在_app.js中设置的，因为我需要组件级别的它。理想情况下，我希望在somename.module.scss文件中这样做： @import '~bootstrap/scss/bootstrap'; 然后在下面，定义我的类名来扩展引导程序类，如下所示： .goright {
@extend .text-right;
} 如果这是不可能的，有没有其他方法可以在下一个框架中实现同样的结果？
浏览 10提问于2020-04-29得票数 1
回答已采纳
1回答
我有以下的ant设计搜索输入组件：
<Search
size="large"
placeholder="Search..."
className="dashboardSearch"
/>
我试图修改边框半径，使其成为圆形，但我在我的css文件中尝试的所有东西都不起作用。
css文件：
.dashboardSearch {
width: 300px;
border-radius: 25px;
}
.ant-input-search {
width: 300px;
border-rad
浏览 5提问于2019-08-04得票数 5
回答已采纳
我正在尝试在来自Fluent UI React库的组件中设置HTML元素的样式。 ? 我想要做的是把“开”/“关”文本放在开关的左边而不是左边。当我查看我的“编译”代码时，我可以看到组件被翻译成： <div>
<label></label>
<div id="target-me">
<button>
<span></span>
</button>
<label></label>
</div&g
浏览 36提问于2020-06-23得票数 0
1回答
我想使用更少的变量为条件类生成一个随机数，这个随机数每秒都会被添加和删除。下面是reactjs文件的示例代码 function App() {
const [date , setDate] = useState('')
const [circleBoolean, setCircleBoolean] = useState(false);
const [random_number, setRandom_number] = useState(0);
useEffect(() => {
const interval = setInterval(()
浏览 21提问于2021-01-09得票数 0
这很难用语言表达，但我希望能够向抽屉组件添加两组图标。Set 1位于顶部，与标准列对齐，就像他们提供的示例一样。Set 2放在抽屉的底部，在两个Set之间留下空白空间，同时保持响应性。
这里有一个粗略的例子，其中xxx表示空白。
图标1
图标2
图标3
xxx
xxx
xxx
xxx
xxx
xxx
图标4
图标5
这是可行的，同时保持响应和避免自定义CSS规则的页边距和填充？谢谢大家！
浏览 4提问于2020-12-06得票数 0
2回答
我正在使用情感，正如我的css-in-js和我承认的那样，我对它相当陌生。我花了1+。一小时，找出如何注入全局样式，并添加谷歌字体，我的整个应用程序。
我试过：
globalStyles和@impot(.)语句。不使用 theme with emotion-theming和样式--不工作链接，在my index.html和他们的身体中{字体-家庭: Roboto} -不工作
有人能给我举个例子吗？？我也想。在JS中学习CSS，但这越来越奇怪了。这么多时间，为了这么简单的事情。
浏览 1提问于2020-11-01得票数 1
我一直试图改变字体和颜色的OptGroup，但它没有改变。我用的是情感css
<Select
className={css
.ant-select-dropdown-menu-item-group-title{
font-size: 15px;
color: white;
}
>
<OptGroup
label="Manager"
>
<Option value="ja
浏览 0提问于2019-08-04得票数 1
回答已采纳
我想写一个单独的HOC，我应该可以使用它作为
export const MyComponent = (props) => <MyView mt5>{props.children}</MyView>
通过与风格相关的道具，如m1、m2、m3等。
* MyView，js
import React from 'react'
import { View as RNView, ViewPropTypes, StyleSheet } from 'react-native'
import PropTypes from 'prop-type
浏览 2提问于2020-04-03得票数 2
我正在研究，我想知道在使用组件时，例如，我是否可以使用CSS随心所欲地设计它的样式？我知道，设计NSSegmentedControl的样式并不容易，如果RN真的允许您通过设计组件的样式来自定义原生元素，我会很惊讶的。
如果不是，子类化是如何与React Native一起工作的？有没有可能，或者你仅仅局限于本机的控件和视图。
浏览 3提问于2016-03-30得票数 2
我在CSS-IN-JS项目中使用了stylelint (这里使用的是astroturf，但我也使用任何CSS-IN-JS库来面对相同的模式，比如styled-components )。
我在同一个文件中定义了不同的样式元素，因此有时会有重复的选择器和/或导入规则。
/* style.js */
import styled from 'astroturf';
export const StyledComponentA = styled('div')`
transform: scale(0);
&.visible {
transform:
浏览 278提问于2018-11-27得票数 1
回答已采纳
当我使用时，我有一个相当简单的需求来添加和传播一些css对象。所以所有的东西都是内联的。所以我认为主要的问题是"& > div"
然而，正如您从一个TS错误中看到的那样，css也被标记了，但遗憾的是，我想不出一个好的理由。
头像/index.tsx
<Image
{...props}
src={src}
objectFit="cover"
data-testid="avatar"
styles={{
width: `${width}px`,
height: `${height}px`,
浏览 0提问于2021-01-12得票数 1
2回答
材质UI样式不渲染
、、、、
我试图建立一个网站使用材料-用户界面和反应。当试图通过Hook API使用Material-UI的样式时，它在codesandbox.io中在线工作，但在我运行它时不能在本地工作。边框半径属性似乎没有更新，按钮或指令对象中的任何属性也没有更新 ? import React from 'react';
import { makeStyles } from '@material-ui/styles';
import Stepper from '@material-ui/core/Stepper';
import Step from '
浏览 20提问于2019-01-08得票数 1
回答已采纳
1回答
我正在用样式化组件CSS-in-JS设计我的Gatsby.js站点。
样式组件能让我的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`
b
浏览 20提问于2018-12-13得票数 3
回答已采纳
我有一个按钮，当点击时，所有内容都是透明的。
是否可以手动设置文本颜色？不是背景色！
我希望我的字体是黑色，而不是透明的。
我的代码：
import React from 'react';
import DatePicker from "react-datepicker";
import Select from 'react-select';
import "react-datepicker/dist/react-datepicker.css";
import 'react-datepicker/dist/re
浏览 12提问于2019-11-11得票数 2
回答已采纳
1回答
我正在开发一个react web应用程序，它有2个列，分别是leftCol和rightCol className。这两个类具有几乎相同的性质，但z指标不同。以下是样式 &__rightCol {
position : relative;
box-sizing: border-box;
z-index: 0;
&_box {
display : none;
}
}
&__leftCol {
position : relative;
box-sizing: border-box;
z-index: 1;
&_box
浏览 18提问于2021-04-15得票数 0
回答已采纳
我正在开发一个小的web应用程序，我正在使用ReactJS和Material UI开发它。在文档中提供的示例中，许多组件似乎在代码中包含useStyles。我遵循了示例，现在基本上在我的每个组件中都有一个useStyles函数。我的问题是:这是一个好的实践吗？通常我有一个包含所有类的单独的CSS文件，坦率地说，我发现它更容易管理，但在这种情况下，我想遵循CSS-in-JS模式。 您可以在这里看到我正在处理的代码的示例：https://github.com/sickdyd/foriio/blob/master/src/components/body/UserProfile.js 感谢您能给我的
浏览 35提问于2019-12-07得票数 1
回答已采纳
1回答
我被这个错误所困扰，我试图使用媒体查询的响应式导航栏根本没有响应，因为@medias似乎对我的尝试没有任何影响。我已经尝试了所有可能的媒体查询格式，但我得到的都是无响应的，请帮助我克服它。 我被这个错误所困扰，我试图使用媒体查询的响应式导航栏根本没有响应，因为@medias似乎对我的尝试没有任何影响。我已经尝试了所有可能的媒体查询格式，但我得到的都是无响应的，请帮助我克服它。 <!DOCTYPE html>
<html>
<head>
<title>Product Page</title>
&
浏览 12提问于2018-12-22得票数 0
2回答
我有一个需求，我不确定是否可以使用Rollup (或使用Webpack?)
我已经编写了一个React组件库。每个组件都导入它的样式表。就像这样
import "./button.scss"
export default function Button() {
...
}
现在，这些scss文件使用了我想在全局文件中定义的所有类型的sass变量。我希望我的库的使用者能够像这样导入Button：
import { Button } from "mylib"或者更好：import Button from "mylib/button"，并且只将But
浏览 0提问于2019-07-30得票数 3
1回答
当用useStyles()创建不同的道具时，它们可以在elemens中访问，比如 const useStyles = makeStyles((theme) => ({
title: {
margin: theme.spacing(4, 0, 2)
}
)
return (
<Typography className={classes.title}>text</Typography>
) 但是，如果我尝试记录内容，它会返回一个字符串makeStyles-title-7 function App() {
const
浏览 39提问于2020-04-16得票数 0
3回答
我想把深色模式的按钮放在网站上所有的项目之上。我用了DarkMode.js作为same.The按钮，是不是隐藏在一个image.How的后面，让它的优先级最高？
浏览 22提问于2021-02-28得票数 1
1回答
antd自动完成下拉高度
、、、、
我是antd新手，英语不是我的母语，所以可能会有错误，我有两个问题，1:目前如果下拉列表中有很多信息，用户不知道是否有更多信息，需要(在手机上)向下滚动才能显示滚动条，我的问题是如何让滚动条始终可见? 2:如果我不想要第一个，如何在不需要用户向下滚动的情况下显示100%的下拉列表，例如'listHeight‘为100% (尝试在那里书写，不接受%)
import React, { useState } from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.cs
浏览 6提问于2021-04-22得票数 0
1回答
你好，我是一个反应新手，对样式也很陌生:)我正在尝试用样式化的组件来设计材质-ui Button组件。
我是通过重写全局类名来做到这一点的，我知道资料-ui引入了全局类名，比如MuiButton-root等等。
我不清楚在父选择器中如何使用"&"，例如：
const StyledButton = styled(Button)`
&.MuiButton-root {
width: 500px;
}
.MuiButton-label {
color: ${props => props.labelColor};
justif
浏览 1提问于2019-11-05得票数 0
我试图为这个div添加一个背景颜色：
import * as React from 'react'
import { Itest } from '../../../../../models'
import { getPreviewStyles } from './preview.style.ts'
type IPreviewProps = Itest
const PreviewC: React.FunctionComponent<IPreviewProps> = (props: IPreviewProps) => {
浏览 3提问于2022-03-24得票数 0
回答已采纳
在一个项目中，我们有定制的模板字符串来抽象样式化组件的函数。例如，我们有用于媒体查询的模板字符串，如下所示：
// Definition
const for1080p = (...args) => css`
@media (min-height: 1080px) {
${css(...args)}
}
`;
// Usage
const Logo = styled.div`
width: 200px;
${for1080p`
width: 300px;
`}
`;
我们做出这样的选择是因为它保留了原始样式的语法。它也是由prettier很好地形成的
浏览 6提问于2020-11-30得票数 5
2回答
我已经看到了很多关于这个话题的帖子，但似乎没有一条对我来说是我想要的方式。我有一个React组件，它接受className作为道具。我还有一个HOC，它接受一个组件和默认样式，并返回一个接受新样式的组件，如下所示： function withCombinedStyles(WrappedComponent, defaultClassName) {
return ({className: newClassName, ...rest}) => {
const className = combineClassNames(newClassName, defaultClas
浏览 39提问于2021-04-21得票数 0
2回答
我是reactjs新手，正在尝试创建一个使用的组件。我想知道，覆盖默认设置来设置拖放区域样式的最好方法是什么。
到目前为止，我有inline style，但在我看来，我做的不是“正确”的事情。
<Row>
<Jumbotron className="text-center">
<h4>Create a manual call</h4>
<Dropzone
className=""
multiple={false}
浏览 0提问于2017-03-20得票数 5
回答已采纳
2回答
我目前正在开发一个利用Material UI Tooltip组件的React组件。在我的组件中，我需要通过根popper元素(MuiTooltip-popper)手动重新定位Mui工具提示。 但是，Mui工具提示是通过一些开箱即用的内联CSS属性呈现的： position: absolute;
transform: translate3d(792px, 68px, 0px);
top: 0px;
left: 0px;
will-change: transform; 如果试图提供新的样式来替换style属性中的这些样式，那么这些属性就不会被应用-它们完全消失了。如果试图通过类提供替换样式(例
浏览 34提问于2019-06-21得票数 7
回答已采纳
1回答
表单的样式化组件
、、、、
我将此表单与material-ui组件一起使用。我不想写我当前使用的宽度内联样式，而是选择css-in-js。我以前用过styled component，但我不认为它有一个form元素。 我遇到的唯一一个例子是他们使用了内置样式的组件标签。因为我已经在这些material ui文本字段上实现了验证，所以我不想更改结构。将样式放在css- in -js中的合适方式是什么？如果有样式化组件的解决方案，我会更喜欢。 return (
<div className="main-content">
&l
浏览 15提问于2020-04-05得票数 0
回答已采纳
1回答
CSS架构、7-1和样式组件
、、、、
除了样式组件和通常的CSS- in -JS的许多伟大的东西，当代码库增长和更多的开发人员加入时，事情可能会变得非常混乱。 围绕CSS和SCSS的一些东西，比如7-1模式(https://www.learnhowtoprogram.com/user-interfaces/building-layouts-preprocessors/7-1-sass-architecture)，如果设置正确，并提供了一些关于界面布局和组件如何工作的指南，事情就会变得非常流畅和有条理，新人可以很容易地加入到代码库中，写出一个像样的CSS，即使他们讨厌它或不知道它。 我喜欢样式组件和CSS-in-JS的强大功能，所
浏览 20提问于2019-10-03得票数 0
我正在编写一个组件库，它使用SCSS模块(<component>.module.scss)进行样式设计。我想设置我的测试，也测试是否所有的样式是正确的应用。现在，我只能测试类的应用是否正确，而不能测试这些类的CSS规则是什么。
以这个简单的测试为例：
describe('Link', () => {
it('renders disabled Link correctly', () => {
const component = mount(Link, {
propsData: {
href: '
浏览 23提问于2022-03-30得票数 1
我在react markdown sich中传递了各种数量的数据，如表格、列表和h标签。我想知道如何分别设置每个元素的样式。我到处搜索，但除了粗体或强调等，没有提到如何设置元素的样式。我想我可以在ReactMarkdown组件中传递一个类名来设置它的样式，但这不仅仅是为组件提供样式。我怎么样式化它里面的各种元素呢？
const ReadMePreviewer = ({ readMeCode }) => {
return (
<ReactMarkdown
plugins={[[gfm, { singleTilde: false }]]}
cla
浏览 58提问于2021-02-25得票数 2
回答已采纳
2回答
你认为用React内联样式来处理伪选择器样式的好方法是什么？它的优点和缺点是什么？
假设每个React组件都有一个styles.js文件。您可以使用该样式文件设置组件的样式。但是你想在一个按钮(或其他什么东西)上做一个悬停效果。
一种方法是有一个全局CSS文件，并以这种方式处理样式伪选择器。这里，类'label-hover‘来自一个全局CSS文件，而styles.label来自组件样式文件。
<ControlLabel style={styles.label} className='label-hover'>
Email
</ControlLa
浏览 1提问于2017-04-30得票数 36
回答已采纳
1回答
我正在创建一个类似于的侧栏，但是我的项目指定所有css格式必须在一个单独的css文件中完成，而不是在抽屉的js文件中完成(就像material演示那样)。我已经想出了如何根据演示文件格式化我的抽屉，但现在我需要弄清楚如何分离css并使其可行。
现在，抽屉使用默认设置呈现，但是除了一个css类之外，所有的css类都无法工作/呈现。只有一个，listItem，工作和改变一个ListItem的高度，这是奇怪的。所有其他css类都不会改变抽屉的外观。
这是一个不工作的版本，其中导入了一个独立的css文件：
.root {
display: flex;
}
.drawerOpen {
浏览 0提问于2018-11-05得票数 0
回答已采纳
1回答
我正在开发一个基于react组件的web应用程序，正在寻找避免z-index问题的任何策略。
传统上，我总是使用共享的SCSS变量对索引进行分组，但是使用完全封装的js组件，这就有点棘手了。
浏览 16提问于2019-08-07得票数 0
我已经将配置为在webpack运行babel-loader时将css文件构建到./app/bundle.css中。我需要将这个文件插入到html-webpack-plugin生成的HTML文件中。我尝试过通过css-loader加载它，例如：
import './bundle.css';
const styles = cssInJs({
red: {
color: 'white',
backgroundColor: 'red',
},
});
const redClass = cx(styles.red);
func
浏览 3提问于2016-11-10得票数 0
回答已采纳
我正在使用@atlaskit/dropdown-menu ()。我想在Item上提交一个小表格点击，我需要提交的DropdownItemCheckbox的值。
下面是呈现所需组件的代码：
import React from "react";
import Dropdown, {
DropdownItemCheckbox,
DropdownItemGroupCheckbox,
DropdownItem
} from "@atlaskit/dropdown-menu";
export default () => (
<Dropdown
浏览 2提问于2018-11-02得票数 0
大家好，我已经创建了一个react组件。在react方式中，我可以很容易地通过className="some_style“将css样式附加到我的组件上。
但是我如何将我的样式组件附加到这些className道具上呢？
说per as
<Component className="styled_component" />
我不知道我会用哪种方法？谢谢
浏览 1提问于2019-02-13得票数 2
3回答
我想在这样的组件中使用来自我的material-ui主题的颜色：
const MyComponent = props => (
<UsersIcon color={currentTheme.primary1Color} />
)
因此，我需要从当前提供的主题中提取一个值。
我找到了解决此问题的有效解决方案，使用上下文检索当前主题：
const MyComponent = (props, {muiTheme}) => (
<UsersIcon color={muiTheme.palette.primary1Color} />
)
contextT
浏览 6提问于2017-04-02得票数 5
回答已采纳
我正在做react。通常我所做的是在一个单独的文件中设置所有的样式，也就是全局的。我读到还有一些其他方法，比如JS中的组件级别样式或css，但无法得出我应该使用哪种方法?？ 我只是想知道哪种方式适合需要什么..
浏览 20提问于2019-05-09得票数 2
回答已采纳
2回答
我正在为我的应用程序使用antd。我需要将默认主按钮的颜色从蓝色更改为灰色。看起来antd并没有提供这样的选择。怎样才能轻松更改按钮的颜色？
浏览 1355提问于2019-06-23得票数 8
回答已采纳
1回答
我正在探索Web组件的开发，更具体地说，它是。但是，重建项目并刷新页面，然后验证CSS修改将需要很长时间。对于Web组件(Fast)，有没有CSS热重载解决方案？(我用的是Webpack)
浏览 3提问于2021-04-07得票数 1
动态/条件类(如)与SCSS、CSS模块、CSS (样式-组件、JSS、情感等)和实用-第一CSS(尾风)之间有什么区别(特别是性能相关的)？
我正在启动一个新的反应(可能与下一个)项目在几个星期后，我目前正在做我的研究，以建立前端的技术栈。感谢您的任何帮助和意见！
浏览 10提问于2022-04-02得票数 -2
2回答
我正在尝试重现中显示的示例。我有编辑器和所有的功能，除了工具栏的外观。我已经导入了‘情感’和‘反应-情感’库。但我看不到呈现的图标，而是看到文本代替它们：
我在“components.js”中看到了定义图标的以下代码：
export const Icon = styled(({ className, ...rest }) => {
return <span className={`material-icons ${className}`} {...rest} />
})`
font-size: 18px;
vertical-align: text-bottom;
`是否
浏览 3提问于2018-09-04得票数 2
回答已采纳
仅仅将className添加到标记中没有任何帮助
<p className="ms-font-m">
sometext
</p>
不会更改字体
浏览 2提问于2018-12-14得票数 0
在进行内联样式时，如何在ReactJS中实现悬停事件或活动事件？
我发现onMouseEnter，onMouseLeave的方法是错误的，所以希望有另一种方法来做到这一点。
具体地说，如果将鼠标非常快速地悬停在组件上，则只会注册onMouseEnter事件。onMouseLeave从不触发，因此无法更新状态...使组件看起来就像仍然悬停在上面一样。如果您尝试并模仿":active“css伪类，我也会注意到同样的事情。如果您单击的非常快，则只会注册onMouseDown事件。onMouseUp事件将被忽略...使组件显示为活动状态。
这是一个显示问题的JSFiddle：
有问题的JSFi
浏览 9提问于2015-05-01得票数 129
我们正在开发使用Office UI Fabric React的O365通信网站的现代We部件。我想使用新的基于ts的方法来设计我的组件(see here)的样式。除了没有使用部署到的SharePoint站点的当前主题之外，一切都运行得很好。 我的webpart是使用SharePoint webparts的标准约曼脚手架创建的(选择React作为框架)。 我的样式代码如下所示： import { getTheme, FontWeights, mergeStyleSets } from 'office-ui-fabric-react/lib/Styling';
export i
浏览 10提问于2019-02-19得票数 4
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
