Ant-design: 전역 스타일 제거

https://github.com/react-component 에서 직접 구성 요소를 사용해 볼 수도 있습니다
antd 그 위에 구축 하고, 그들은 스타일이 적용되지 않은 있습니다.

이 문제를 해결하십시오. 우리 앱의 하드 블로커입니다.

안녕하세요, 여러분은 감정이나 스타일 구성 요소와 같은 CSS-in-JS 라이브러리를 사용하는 것에 대한 생각을 해본 적이 있습니까? 스타일에 대한 전역 가져오기 및 ant 구성 요소에 대한 스타일 범위 지정과 같은 많은 문제를 해결할 수 있습니다. 또한 테마(동적 스타일)를 개선할 수도 있습니다. 이것이 다른 곳에서 논의되었다면 사과드립니다. 관련 토론을 찾을 수 없습니다.

@divyanshu013 antd는 구성 요소/자바스크립트뿐만 아니라 antd 스타일 사양을 포함하기 위한 것이기 때문에 이것이 최우선 순위가 아니라는 것을 읽은 것 같습니다. 또한 이것은 기술적으로 내부 프로젝트에 대한 단일 저장소를 의미하므로 다른 사람의 브랜드에 대한 테마 지정은 자동으로 최우선 순위가 아닙니다. 즉, 나는 당신과 함께합니다. 전역 스타일보다 styled-components를 사용했으면 합니다.

https://github.com/ant-design/ant-design/issues/5570#issuecomment -306960517

https://spectrum.chat/thread/ca82a625-134f-49df-9900-1b0b6342e037

좋아, 나는 antd의 덜 파일 구조를 그렇게 깊게 보지 않았다는 것을 인정해야 한다. 그래서 누군가가 이것에 대해 밝힐 수 있을 것이다.

단순히 구성 요소의 less 파일만 포함하는 것이 얼마나 큰 범죄입니까? 예를 들어 다음과 같은 작업을 수행합니다.

import { 'antd'에서 };
가져오기 'antd/lib/select/style/index.less';

간단한 테스트를 해보니 잘 되는
이것이 업데이트로 인해 중단될 것이라고 확신하지만 다른 솔루션도 위험을 감수하는 것 같습니다.

이는 개별 구성 요소에 대한 스타일을 가져올 수 있는 것과 관련이 있습니다. 구성 요소의 스타일이 자체 포함된 경우 사람들은 전역 재설정/스타일을 선택하거나 선택 해제할 수 있습니다.

지금 상황:

• 전역 재설정 및 스타일을 제거하는 것은 주요 변경 사항이기 때문에 실현 가능하지 않습니다.
• 개별 구성 요소에 대한 스타일 가져오기는 때때로 숨겨진 종속성이 있고 전역 스타일에 의존하기 때문에 현재 작동하지 않습니다.

어떻게 하면 구성 요소를 깨지지 않는 방식으로 자체적으로 포함할 수 있습니까? 한 가지 해결책은 Storybook 을 사용하여 일부 격리된 시각적 회귀 테스트를 설정하는 것입니다.

전역 스타일이 포함된 스냅샷을 생성한 다음 전역 스타일을 제거하고 테스트를 통과할 때까지 구성 요소에 스타일을 추가할 수 있습니다.

참조 #4331 #13459

_ 반중복 문제 를 만들어 죄송합니다. 대화를 통합하기 위해 여기에서 약간 다른 질문을 다시 할게요._

커뮤니티가 더 이상 전역 스타일에 의존하지 않도록 구성 요소 스타일을 전환하는 작업을 수행할 수 있다면 어떨까요?

한 가지 접근 방식(@DylanVann 감사):

1. 모든 구성 요소에 대한 자동화된 시각적 회귀 테스트 추가
2. 비전역적 방식으로 이전의 전역 스타일을 사용하도록 구성 요소 스타일을 리팩터링합니다.
   
   
   
   • 나는 [class="ant-"] { ... } 접근 방식 을 좋아하지만 여기에는 많은 옵션이 있습니다.
   
   
3. 구성 요소에 대한 주요 변경 사항이 없는지 확인
4. 의존하는 사람들을 위해 옵트인 가져오기로 글로벌 스타일과 함께 오늘날의 base.less를 제공합니다.

Ant는 다음에 열려 있습니까?

1. 해당 작업에 대한 PR을 검토하고 잠재적으로 수락합니까?
2. 현재 글로벌 스타일에 의존하는 소비자를 위해 옵트인 가져오기를 제공하는 타협을 수락하시겠습니까?

모든 업데이트?

안녕하세요!
다른 방식으로 구성 요소 스타일을 가져와서 이 문제를 해결했습니다.

처음에는 다음과 같은 스타일을 가져왔습니다.
import 'antd/lib/button/style/css';

그러나 css.js 는 가져오기 버튼의 스타일뿐만 아니라 일반 스타일도 가져오는 내용입니다.

"use strict";

// General styling (body, h1, h2..)
require("../../style/index.css");

// Button styles
require("./index.css");

그래서 다음과 같이 index.css 파일을 가져와서 해결했습니다.
import 'antd/lib/button/style/index.css';

좋은 발견!

둘 이상의 index.css 파일에 의존하는 더 복잡한 구성 요소가 있습니까?
기본 일반 스타일 파일이 없으면 중단되는 구성 요소가 있습니까?

좋은 발견!

감사합니다 😄

둘 이상의 index.css 파일에 의존하는 더 복잡한 구성 요소가 있습니까?

아마도 그 경우 모든 파일을 가져올 것입니다. 너무 많지는 않을 것이라고 생각합니다.

기본 일반 스타일 파일이 없으면 중단되는 구성 요소가 있습니까?

버튼으로 잘 작동했습니다(내가 사용한 유일한 구성 요소).
그러나 일부 구성 요소는 이러한 스타일을 사용할 수 있으므로 확인해야 합니다.

@fedebabrauskas 와 같은 방식으로 하고 모든 것이 잘 작동하는 것 같습니다.

@fedebabrauskas 구성 요소에 대한 애니메이션이 활성화되지 않은 것 같습니다(팝오버를 시도했지만 스타일은 괜찮지만 애니메이션이 없습니다)

좋아, 나는 antd의 덜 파일 구조를 그렇게 깊게 보지 않았다는 것을 인정해야 한다. 그래서 누군가가 이것에 대해 밝힐 수 있을 것이다.

단순히 구성 요소의 less 파일만 포함하는 것이 얼마나 큰 범죄입니까? 예를 들어 다음과 같은 작업을 수행합니다.

import { 'antd'에서 };
가져오기 'antd/lib/select/style/index.less';

빠른 테스트를 기반으로 하면 작동하는 _것처럼_ 해서 호기심이 생겼습니다...
이것이 업데이트로 인해 중단될 것이라고 확신하지만 다른 솔루션도 위험을 감수하는 것 같습니다.

이것은 생명의 은인입니다!
나는 import 'antd/dist/antd.css'를 사용하고 있었습니다
Google에서 검색하여 이 문제를 찾았습니다.
스위치 구성 요소에 대한 스타일만 필요했기 때문에 import 'antd/lib/switch/style/index.less'를 시도했습니다. 그리고 붐! 효과가 있었다!!
고마워 친구야!!
코드 구현
배포된 포트폴리오

그래서 확인을 위해 오늘 현재 index.css 수입할 수 없습니까?

나는 Gatbsy를 사용하고 있고 내 global.css 는 개미 index.css 의해 덮어쓰여지고 있습니다.

해결 방법으로 - 방금 아래와 같은 사후 설치 스크립트를 만들었습니다.

scripts/postinstall.js

#!/usr/bin/env node
const replace = require('replace-in-file');

const removeAntdGlobalStyles = () => {
    const options = {
        files: [`${process.cwd()}/node_modules/antd/lib/style/core/index.less`, `${process.cwd()}/node_modules/antd/es/style/core/index.less`],
        from: "<strong i="8">@import</strong> 'base';",
        to: '',
    };

    replace(options)
        .then(() => {
            console.log('[INFO] Successfully Removed Antd Global Styles:');
        })
        .catch(e => {
            console.error('[ERR] Error removing Antd Global Styles:', e);
            process.exit(1);
        });
};


removeAntdGlobalStyles();

package.json

 "devDependencies": {
  //other dependancies
  "replace-in-file": "^5.0.2"
},
"scripts": {
  // other scripts
  "postinstall": "node scripts/postintall.js"
}

참고 : 주문형 구성 요소 가져 오기 에

해결 방법으로 - 방금 아래와 같은 사후 설치 스크립트를 만들었습니다.

scripts/postinstall.js

#!/usr/bin/env node
const replace = require('replace-in-file');

const removeAntdGlobalStyles = () => {
    const options = {
        files: [`${process.cwd()}/node_modules/antd/lib/style/core/index.less`, `${process.cwd()}/node_modules/antd/es/style/core/index.less`],
        from: "<strong i="9">@import</strong> 'base';",
        to: '',
    };

    replace(options)
        .then(() => {
            console.log('[INFO] Successfully Removed Antd Global Styles:');
        })
        .catch(e => {
            console.error('[ERR] Error removing Antd Global Styles:', e);
            process.exit(1);
        });
};

removeAntdGlobalStyles();

package.json

 "devDependencies": {
  //other dependancies
  "replace-in-file": "^5.0.2"
},
"scripts": {
  // other scripts
  "postinstall": "node scripts/postintall.js"
}

스크립트는 기본 스타일을 제거하지만 여전히 전역 antd 스타일을 제거하지 않습니다. 각 antd 구성 요소 또는 단일 dist CSS 파일에 대한 스타일을 가져오나요?

@himanshuc3 주문형 구성 요소 가져 오기를 위해

@fedebabrauskas 구성 요소에 대한 애니메이션이 활성화되지 않은 것 같습니다(팝오버를 시도했지만 스타일은 괜찮지만 애니메이션이 없습니다)

같은 경우이지만 축소

babel-plugin-import 전역 스타일을 가져오고,
다음과 같이 특정 구성 요소 CSS 파일을 가져옵니다.
import 'antd/lib/date-picker/style/index.css';
Datepicker를 끊습니다(이상하고 예상치 못한 방식으로 열리고 닫힙니다.)

그것에 대한 해결 방법이 있습니까?

세상에 다른 많은 구성 요소에 의존하는 전송 구성 요소를 사용하고 있습니다 ... 이제 모든 어두운 타이포그래피 헤더가 기본 색상 등을 따르지 않는다는 것을 깨닫습니다.

+1

+1

이것은 다른 구성 요소 라이브러리와 함께 Ant Design을 사용하는 데모 앱에서 사용한 해결 방법입니다.

index.scss :

.antPage {
  <strong i="8">@import</strong> '~antd/dist/antd.min';
  ...
}

이제 Ant의 모든 전역 스타일은 네임스페이스가 지정되었으며 Ant 스타일 페이지에서 이 작업을 수행할 수 있습니다.

function AntPage() => <div className="antPage">...</div>

그러나 이 라이브러리에서 제공하는 일부 구성 요소가 네임스페이스 스타일에 실제로 대처할 수 없기 때문에 또 다른 문제가 발생합니다.(

예를 들어 DatePicker 결과 구성 요소가 내부되지 않도록, 마크 업 _outside_ 몸을 렌더링 .antPage 따라서 스타일이 작동하지 않습니다. 작동하기 위해 추가 마크업이 필요한 드롭다운 및 기타 구성 요소의 경우에도 동일합니다.

그런 다음 위에서 제안한 해결 방법을 시도하면:

import 'antd/es/date-picker/style/index.css'
import 'antd/es/dropdown/style/index.css'
import 'antd/es/input/style/index.css'

그것은 _거의_ 작동하지만 이상하게 동작하기 시작합니다. 날짜 선택기에 초점을 맞추면 표시되지 않고 대신 opacity: 0 남아 있습니다. 그러다 초점을 잃는 순간 부동 날짜 선택기가 나타납니다... 😕

스타일을 개별적으로 로드하는 것이 동작에 어떤 영향을 미치는지 정확히 확신할 수 없지만 다른 버그일 수 있습니다.

어쨌든 비전역 스타일 버전이 좋은 효과를 낼 수 있는지 봅시다 :+1:

@OscardR 저는 이 문제가 모션 CSS 파일 <strong i="6">@import</strong> 'antd/es/style/core/motion.less'; 포함하지 않은 것과 관련이 있다고 생각합니다.

다른 사람이 비슷한 문제가 있고 모든 스타일을 가져오지만 전역 스타일이 없는 경우:

모든 .less 파일을 가져와서 antd.less 파일에 넣은 다음 전역 스타일을 포함하는 dist 파일 대신 해당 파일을 가져옵니다.

https://gist.github.com/SPDUK/b93e9c28c11e41d5f3b6d9ad9fc7be36

내가 덜 사용자가 아닌 경우 다른 옵션을 사용할 수 있습니까? 나는 sass를 사용하고 있으며 이것을 패치하기 위해 더 적게 추가하고 싶지 않습니다. Select 구성 요소를 실행하기 위해 최소한의 CSS 파일만 로드할 수 있기를 원합니다.

거의 3년 동안 이 문제가 내 Github 홈페이지 상단에 나타납니다.

나는 이제 오랫동안 개미 사용을 중단했습니다. 이것을 닫고 커뮤니티나 유지 관리자가 다른 곳에서 팔로우하도록 할 수 있습니까?

Remove global Styles 에 대한 모든 것, 모두가 이제 이것에 집중하고 있습니다. 더 자세히 알고 싶지 않다면 이 문제만 unsubscribe 하세요. 감사합니다!

최고의 아이디어가 아닌가 싶습니다. 우리 중 많은 사람들이 여전히 antd를 사용하고 있으며 이 문제가 해결되기를 바랍니다.
주요 문제가 모든 역사를 가지고 있다는 것이 좋습니다.