score: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:
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.
Source: stackoverflow.com
Related Query
- Concatenating props and static values in style={{}} in React
- Is it OK to put propTypes and defaultProps as static props inside React class?
- How to pass down props down to a React component having same keys and values
- Using React State values and Props
- Convert React useState hooks to pass in props and update prop values
- Propagate style props to React children and apply them to a CSS file
- How to make this component looped in React (by counting the fat thact it receives props and does some calculation and has static titles)
- How to display default and props values in react js?
- React Style props are not reflected in IE, getBoundingClientRect does not have x and y
- How to prevent passing className and style props to component in React
- Concatenating variables and strings in React
- Extending HTML elements in React and TypeScript while preserving props
- How to define css variables in style attribute in React and typescript
- interface states and props in typescript react
- How to verify React props in Jest and Enzyme?
- Specify specific props and accept general HTML props in Typescript React App
- How to make react router work with static assets, html5 mode, history API and nested routes?
- How to set React component state and props from browser
- ReactJS - How to change style and class of react component?
- React memo components and re-render when passing function as props
- How to mock functions, and test that they're called, when passed as props in react components?
- React TransitionGroup and React.cloneElement do not send updated props
- When and how to choose between React Hooks and old HOC props passing?
- react routing using RouteComponentProps and custom props
- static getDerivedStateFromProps that requires previous props and state callback?
- Pass style as props in react component
- how to share environment variables between react app and express js server hosting it as static site
- Add style from props to existing component styles in React Native
- how to import images via props in react and use the 'import' path
- HOC's and Render Props With Functional Components in React 16
More Query from same tag
- How to apply bootstrap <a> style to a <button> in a navbar
- Multiple modal handle in react-js
- Package-lock.json being built with weird structure and doubled in size
- How to change state of component from anywhere without Redux?
- How to use useEffect() correctly?
- React: Changing value of separate inputs
- How to style react-native-sectioned-multi-select?
- Reactjs galleryblock
- How to use grid-template-areas in react inline style?
- Scroll bar doesn't scroll all the way to the bottom of my table
- react-share can't share LinkedIn article
- What is the best way to update object array value in React
- How to use js/jsx files in a typescript+webpack project?
- "Attempted import error: 'authReducer' is not exported from './authReducer'. "
- Passing environment variables in dockerfile
- Adding transition to the activeclass in react router v6
- mapStateToProps doesn't provide a data from the state
- fill ant design Table with data from state
- Why media queries are ignored when touch mode is enabled?
- React vis Line Chart not rendering properly
- Can you help me with layouts on react native app?
- Connect two dropdown filters to one search button
- Can I choose which AntD icon to use with allowClear = true?
- What does this.function = this.function.bind(this) do in the following context? ReactJS
- How to get next element in Immutable List when use .map?
- Different props state for smart and dumb component
- Ternary in jsx to add selected attribute to option
- react button is called before onPress when using Hooks
- Material ui Autocomplete endInputAdornment custom elements not centered
- InsertBefore firstChild on event handler using React and Js