How to change styles in useable component in ReactJS - reactjs

Question

I have following code.
This is my reusable components which name is "Blocks"
import React from "react";
import styles from "./Blocks.module.scss";
import cx from "classnames";
const Blocks = ({ newStyle }) => {
return (
<div className={cx(styles.blocksBox, { newStyle })}>
<div>
Some Text !!!
</div>
</div>
);
};
export default Blocks;
And this is styles from my "Blocks" component
.blocksBox {
display: grid;
grid-template-columns: 49% 50%;
padding: 10px 30px;
margin:20px;
column-gap: 30px;
}
Also I have another component which name is "MainBox", and I want to use "Blocks" component in "MainBox" with different styles. Below you can seethe code and new styles.
import React from "react";
import Blocks from "../Blocks";
import styles from "./MainBox.module.scss";
import cx from "classnames";
function MainBox() {
return (
<div>
<div> Some Text in Main Box </div>
<Blocks newStyle={styles.someStyle} />
</div>
);
}
export default MainBox;
.someStyle {
font-size: 50px;
color: red;
margin:30px;
}
But something was going wrong and new styles dose not applied, there is no any errors, I just write some wrong syntax, please help me resolve this problem

Answer 1

You can try concatinating styles like this:
import React from "react";
import styles from "./Blocks.module.scss";
import cx from "classnames";
const Blocks = ({ newStyle }) => {
return (
<div style= {[styles.blocksBox, newStyle ]}>
<div>
Some Text !!!
</div>
</div>
);
};
export default Blocks;
Example:
import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';
// You can import from local files
import AssetExample from './components/AssetExample';
// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';
export default function App() {
return (
<View style={styles.container}>
<Box />
<Box newStyle={{ backgroundColor: 'yellow' }} />
</View>
);
}
const Box = ({ newStyle }) => {
return <View style={[styles.box, newStyle]}></View>;
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
box: {
backgroundColor: 'red',
width: 200,
height: 200,
},
});
output:
Expo Snack

Answer 2

I just deleted curly braces and everything started work
import React from "react";
import styles from "./Blocks.module.scss";
import cx from "classnames";
const Blocks = ({ newStyle }) => {
return (
<div className={cx(styles.blocksBox, newStyle )}>
<div>
Some Text !!!
</div>
</div>
);
};
export default Blocks;