首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >无-重复-同一文件内不同选择器的选择器错误

无-重复-同一文件内不同选择器的选择器错误
EN

Stack Overflow用户
提问于 2018-11-27 20:29:02
回答 1查看 1.1K关注 0票数 1

我在CSS-IN-JS项目中使用了stylelint (这里使用的是astroturf,但我也使用任何CSS-IN-JS库来面对相同的模式,比如styled-components )。

我在同一个文件中定义了不同的样式元素,因此有时会有重复的选择器和/或导入规则。

代码语言:javascript
复制
/* style.js */
import styled from 'astroturf';

export const StyledComponentA = styled('div')`
  transform: scale(0);

  &.visible {
    transform: scale(1);
  }
`;

export const StyledComponentB = styled('div')`
  opacity: 0;

  /* -> stylelint error: Unexpected duplicate selector "&.visible" */
  &.visible {
    opacity: 1;
  }
`;

我是这样写的:

代码语言:javascript
复制
import React from 'react';
import { StyledComponentA, StyledComponentB } from './style';

export const Component = ({ isVisible }) => (
  <StyledComponentA visible={isVisible}>
    <StyledComponentB visible={isVisible}>Whatever</StyledComponentB>
  </StyledComponentA>
);

有没有一种方法可以在块而不是整个文件上设置这些样式规则?

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-12-13 06:57:51

有没有办法在块上而不是整个文件上设置这些样式规则?

没有。

no-duplicate-selectors这样的规则的作用域是一个源,而stylelint将以下内容视为源:

  • 整个文件传递给传递给CLI

node API

  • stdin

  • 选项的code代码

在编写CSS-in-JS时,建议您关闭仅限于源代码的规则。您可以将其关闭:

使用command comments逐个创建一个完整的案例,例如"no-duplicate-selectors": null

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/53499725

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档