CODEWITHSUNDEEP
javascripthtmlcssreactjs
bsky
bsky

Reputation: 20242

React component not taking into account CSS

I am using this React component https://github.com/mzabriskie/react-flipcard.

I am trying to specify its size like this:

<FlipCard type="vertical" className="largeDiv">
                <div>Bad!!!!</div>
                <div>Good!!!!</div>
 </FlipCard>

Using this css file:

.largeDiv {
    width: 500px;
    height: 500px;
}

Imported like this:

import '../assets/style.css';

I changed its size in the css but still in the page, the Flipcard has a small size which doesn't change:

enter image description here

I also tried like this:

<FlipCard type="vertical" style={{width: '500px',height: '500px'}}>

but with no effect.

Is there any way I can specify the size of an imported module. Is there any css missing?

Upvotes: 1

Views: 181

Answers (1)

lux
lux

Reputation: 8455

Taking a look at the source of FlipCard.js, it doesn't appear as though this component accepts className as props, meaning you won't be able to pipe your CSS class down to the inner HTML elements:

https://github.com/mzabriskie/react-flipcard/blob/master/lib/components/FlipCard.js

Moreover, the author of the component appears to be setting their own className at the root level of the component, based on some available props like flipped or disabled:

  render() {
    return (
      <div
        className={cx({
          'ReactFlipCard': true,
          'ReactFlipCard--vertical': this.props.type === 'vertical',
          'ReactFlipCard--horizontal': this.props.type !== 'vertical',
          'ReactFlipCard--flipped': this.state.isFlipped,
          'ReactFlipCard--enabled': !this.props.disabled
        })}
        ....

I've found this to be quite common with 3rd-party component libraries. More often than not, I find myself trying to shoehorn functionality or styles into a component that wasn't designed for flexibility. As such, I often peruse 3rd-party components for inspiration, then simply rewrite to meet my needs.

Upvotes: 2

Related Questions