How to change styles in useable component in 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