如何仅在一个组件上应用 Semantic UI 的 css？

Question

我需要导入语义 UI 以使 Multiple Dropdown 正常工作。 但是，当我导入他们的 CSS 时，它会覆盖我的很多 css。 显然，我不希望他们覆盖我的样式，但我想将他们的组件与我将自定义的样式一起使用。

有没有办法将样式表仅应用于一个组件，而不是将其应用于我网页上的每个组件？ 我真的被困在这个问题上，这很糟糕......

非常感谢你的帮助！

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Dropdown } from 'semantic-ui-react';
import { withTranslation } from 'react-i18next';
import { handleChange } from 'redux/actions';
import { connect } from 'react-redux';
import FormContext from 'context/FormContext';
import 'semantic-ui-css/semantic.min.css';

export class DropdownSearch extends Component {
  constructor (props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
  }

  getRequired () {
    if (this.props.required === true) {
      return <span className="tw-font-semibold tw-text-red-500 tw-text-sm tw-ml-2">{this.props.t('required')}</span>;
    }
  }

  handleChange (e, context) {
    var value = e.target.value;
    // this.props.handleChange(this.props.name, value, context.name);
  }

  render () {
    return (
      <FormContext.Consumer>
        {context =>
          <div className={`tw-flex tw-flex-col ${this.props.size} tw-px-2 tw-mb-3`}>
            <label htmlFor={this.props.name} className="tw-text-sm tw-font-bold">{this.props.title || this.props.t('common:' + this.props.name)}{this.getRequired()}</label>
            <Dropdown {...this.props} id={this.props.name} placeholder={this.props.title}/>
            {this.props.errors && this.props.errors[context.name] && this.props.errors[context.name][this.props.name] && (
              <div className="tw-bg-red-100 tw-mt-2 tw-border-l-4 tw-border-red-500 tw-text-red-700 tw-p-2 tw-text-sm">
                <p>{this.props.errors[context.name][this.props.name]}</p>
              </div>
            )}

          </div>
        }
      </FormContext.Consumer>

    );
  }
}

DropdownSearch.defaultProps = {
  size: 'w-full',
  required: true,
  type: 'text'
};

DropdownSearch.propTypes = {
  name: PropTypes.string.isRequired,
  title: PropTypes.string,
  size: PropTypes.string.isRequired,
  required: PropTypes.bool,
  type: PropTypes.string,
  t: PropTypes.func.isRequired
};

const mapStateToProps = ({ errors }, ownProps) => {
  return {
    errors: errors
  };
};

export default connect(mapStateToProps, { handleChange })(withTranslation(['input'])(DropdownSearch));

仅应用于<Dropdown>是目标

Answer 1

这显然有点晚了，但是对于您的特定用例，有一种比转向 CSS 模块更简单的方法。 If you only need to import the styles for one of Semantic UI's components such as the aforementioned <Dropdown> component, the easiest way to handle this is by importing the minified version of that specific component's css from the semantic-ui-css package which you '已经安装了。

如果您查看 node_modules 文件夹中的 semantic-ui-css 文件，您应该注意到每个组件的 css 被分离成单独的文件。 您需要做的就是像这样导入它：

import "semantic-ui-css/components/dropdown.min.css";