Concatenating props and static values in style={} in React
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>
);
@LOTUSMS Why do you think you need to recode them? Just do that one level higher then. You should add that to your
Component
render logic of course. And that just once. Every rendering of that component will automatically be affected by that change.– trixn
Aug 6 at 16:14
Component
The inline style needs to be at a specific level. Either higher or below and the css overflow acts differently. I need to make this change at the component level so it propagates to all the pages where that component is being used
– LOTUSMS
Aug 6 at 16:17
It's not clear what you are trying to achieve. Please do not post just unrelated snippets. You can apply my answer on any level you like. I can't see a problem with that. Just do it in the
render()
function of the component that should apply the default.– trixn
Aug 6 at 16:20
render()
Oh wait! I misunderstood you. You meant adding it to the Component where I am declaring the prop, not the Component use in the pages! ...lol. soryy man. Long day and it is only 12PM
– LOTUSMS
Aug 6 at 16:20
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.
I need to do the cahnge at component level. I can't recode thousands of existing tables (it's used on a table by the way)
– LOTUSMS
Aug 6 at 16:13