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

Question

I need to import the Semantic UI to make a Multiple Dropdown work properly. However, when I import their CSS, it overrides a lot of my css. Obviously, I don't want them to override my style, but I want to use their component with their style that I will custom.

Is there a way to apply a stylesheet only to one component instead of applying it to every component on my webpage? I am really stuck on this and it sucks...

Thanks a lot for your help!

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));

Applied only to <Dropdown> is the goal

Answer 1

This is obviously a little late to the game, but there's an easier way than turning to CSS Modules for your specific use case. 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've already installed.

If you take a look at the semantic-ui-css files in your node_modules folder, you should notice that each component's css is separated out into individual files. All you would need to do is import it like this:

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