How can I apply Semantic UI's css only on one component?

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

I believe you can accomplish scoped styles with [CSS Modules](https://github.com/css-modules/css-modules), importing the entire semantic UI stylesheet into a single component, but that seems like a lot of trouble to go for for one component. If you only want to use a dropdown, maybe look into a library that just provides that, like [react-select](https://react-select.com/home). — Chris B., Sep 01 '20 at 01:57
Does this answer your question? https://stackoverflow.com/questions/28386125/dynamically-load-a-stylesheet-with-react — keikai, Sep 01 '20 at 03:15

score 0 · Answer 1 · answered Aug 19 '22 at 17:02

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

Sadly the Dropdown component depends on other css files as well, dropdown.min.css contains only dropdown specific css. — Vojta Rujbr, Jan 25 '23 at 14:36

score 0 · Answer 2 · answered Mar 22 '23 at 04:56

0

Just add the below CSS code in your index.css or App.css. It works for me.

.visible.transition {
    display: block !important;
    visibility: visible !important;
 }

answered Mar 22 '23 at 04:56

Harshdeep Singh

64
6

How can I apply Semantic UI's css only on one component?

2 Answers2