Override Antd Select

[etelced]

Hi, I came from here https://stackoverflow.com/a/57654191/7377225, and I wish to use this to override the styles of Select component in antd in another scoped component. However, after installing, the styles still applies to globally. Please see my code.

CustomSelect.js

import React from 'react';
import {  Select } from 'antd';
import './customSelect.scoped.css';
const { Title, Text } = Typography;
const { Option } = Select;

export default (props) => {
  return (
    <Select placeholder="">
        <Option  value={1}>1</Option>
    </Select>
  );
};

customSelect.scoped.css

.ant-select-single.ant-select-show-arrow .ant-select-selection-item,
.ant-select-single.ant-select-show-arrow .ant-select-selection-placeholder {
  padding: 0;
}
.ant-select-single.ant-select-show-arrow .ant-select-selection-item,
.ant-select-single.ant-select-show-arrow .ant-select-selection-placeholder {
  padding: 0;
}
.ant-select-single.ant-select-show-arrow .ant-select-selection-item,
.ant-select-single.ant-select-show-arrow .ant-select-selection-placeholder {
  font-size: 18px;
}
.ant-select-single:not(.ant-select-customize-input) .ant-select-selector {
  height: 80px;
  padding: 0px;
}

Then I have tried to use it in another component like this. Both still have the same styles where I expected that only the CustomSelect component should have had the 80px height.
AnotherComponent.js

import React from 'react';
import {  Select } from 'antd';
import CustomSelect from '../components/CustomSelect/CustomSelect';

export default (props) => {
  return (
    <Select placeholder="">
        <Option  value={1}>1</Option>
    </Select>
    <CustomSelect placeholder="">
        <Option  value={1}>1</Option>
    </CustomSelect>
  );
};

[gaoxiaoliangz]

In order to override third party styles you have to use /deep/

eg:

export default (props) => {
  return (
    <Select placeholder="" className="my-select">
        <Option  value={1}>1</Option>
    </Select>
  );
};

.my-select /deep/ .ant-select-single.ant-select-show-arrow .ant-select-selection-item,
.my-select /deep/ .ant-select-single.ant-select-show-arrow .ant-select-selection-placeholder {
  padding: 0;
}

This way hash is assigned to .my-select instead of those classes that follow.

[iblq]

why don't write in readme??? it's important

[alexandernst]

@gaoxiaoliangz I'm trying to use the /deep/ selector, but I'm getting errors from sass-loader: SassError: expected selector..

Are there any other things that must be done in order to get the nested selector working?

[gaoxiaoliangz]

@gaoxiaoliangz I'm trying to use the /deep/ selector, but I'm getting errors from sass-loader: SassError: expected selector..

Are there any other things that must be done in order to get the nested selector working?

Could you provide some code?

[oqx]

@alexandernst I believe /deep/ works with node-sass, but the official sass package is now dart-sass, and I think that causes /deep/ to choke.

@gaoxiaoliangz If you update @vue/component-compiler-utils to v2.6.0, ::v-deep should work, according to this issue:
vuejs/vue-cli#3399 (comment)

[LoganDark]

node-sass does not support :not, which breaks a lot of my application. Any alternatives to /deep/?

[fires3as0n]

Isn't /deep/ a feature of vuejs that was replaced by ::v-deep? If yes how that could affect react application?
Your approach for style encapsulation looks very good. Angular has the same with ViewEncapsulation.Emulated, but it has ::ng-deep commonly used for locally overriding styles of ui-libraries.
Would be very nice to have the same for React, because now the only solution is to have 2 style files, one for scoped CSS, one for overriding the library

[gaoxiaoliangz]

#60