score:2

Accepted answer

the style prop takes an object. the inner brackets {} are just the syntax for creating an object inline. so just add the desired property to that object in the render function:

const component = ({height}) => (
    <div class="component-blah-blah" styles={{height, overflowx: 'hidden'}}></div>
);

score:1

the example code you've given doesn't seem to match the description you wrote along with it. you said (emphasis, mine):

so that regardless of how they use the styles prop, it will always carry out the overflow-x i defaulted.

but the code you've put here doesn't show there being a style prop. it just shows there being a height prop. if the user of this component is only given a height prop to use, there's no way that value could ever overwrite your overflowx style property.

but... if you're trying to allow the consumer to pass in their own style object in the props, and then ensure that they can't overwrite your desire to implement an overflowx feature, you should use a spread operator to effectively concatenate the user's style, with your style, while keeping your style from being overwritten. it would look something like this:

class app extends component {
  render() {
    const stylefromprops = { display: 'none' };
    return (
      <p
        style={{
          ...stylefromprops,
          display: 'inherit',
        }}
      >
        is this displayed???
      </p>
    );
  }
}

render(<app />, document.getelementbyid('root'));

here is a live example:

https://stackblitz.com/edit/react-spread-operators-in-styles

notice in this example that the stylefromprops object has a display value of none. but the contents of the <p> tag still display. because the hardcoded value for display is listed in the style object after the display value that's passed in. in css, if an attribute is declared twice, the last one "wins".

so if you're allowing the user to pass in a style object as a prop, but you want to ensure that they don't overwrite some of the "critical" styles that you're using, you can do it in this way.


Related Query

More Query from same tag