Clash Royale CLAN TAG#URR8PPP

Concatenating props and static values in style={} in React

I have a component I am passing a height as props so it can be used at page level like so (minified code)

<Component style=height />

Component.propTypes =
height: PropTypes.string, //make sure it's a string


Component.defaultProps =
height: "100%", //100% otherwise defined



This can be used later as

<Component height="100%"/>
<Component height="50%"/>
<Component height="20%"/>
...


And renders as

<div class="component-blah-blah" styles="height: 100%;"></div>


I want to add overflow-x: hidden to the party but as a default and non-changeable prop. So that regardless of how they use the styles prop, it will always carry out the overflow-x I defaulted. Like so:

overflow-x: hidden

<Component height="100%"/>
<div class="component-blah-blah" styles="height: 100%; overflow-x:hidden"></div>

<Component height="50%"/>
<div class="component-blah-blah" styles="height: 50%; overflow-x:hidden"></div>

<Component height="20%"/>
<div class="component-blah-blah" styles="height: 20%; overflow-x:hidden"></div>


I know I can concatenate classes in string and props like this using the --> ` <-- and the $ sign, but not with a double bracket as style requires.

I'm looking for the syntax for something like this

className='$classes.myPropClass myCSSclass'


which renders as class="myPropClass myCSSclass" , but for inline styles, not classes...and I can't assing overflow to a class. For other complicated reasons

class="myPropClass myCSSclass"

2 Answers
2

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:

style

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


Component

render()

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.

style

height

height

overflowX

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:

overflowX

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

styleFromProps

display

none

<p>

display

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.

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.