CODEWITHSUNDEEP
cssreactjssemantic-ui
joethemow
joethemow

Reputation: 1773

Why is the css style not applying to the modal?

For some reason the css style is not applying to the React Modal. Any reason why?

render() {
    return (
      <div>
        <Modal defaultOpen={this.props.isShowing} className="openmodal">
        </Modal>
      </div>
    );
}

CSS File

.openmodal{
  text-align: center;
  background-color: black;
  border-radius: 0;
  width: 400px;
  position: relative;
}

Upvotes: 1

Views: 4074

Answers (3)

Yilmaz
Yilmaz

Reputation: 49293

It comes with its own DOM structure and its own set of classes.

enter image description here

so you have to target those classes in the screenshot

Upvotes: 0

SSS
SSS

Reputation: 116

It should be portalClassName:

<Modal defaultOpen={this.props.isShowing} portalClassName="openmodal">
</Modal>

Upvotes: 0

J. Mark Stevens
J. Mark Stevens

Reputation: 4945

If you want to use a javascript style you apply it like this;

const openmodal = {
  content: {
    textAlign: 'center',
    backgroundColor: 'black',
    borderRadius: '0',
    width: '400px',
    position: 'relative'
  }
}

render() {
    return (
      <div>
        <Modal defaultOpen={this.props.isShowing} style={openmodal}>
        </Modal>
      </div>
    );
}

Try with the inline style.

Upvotes: 0

Related Questions