How to pass var from jsx to pure css file in react js?-CodePudding

I want to pass var form parent component to child component (--my-custom) that will set color for child component , but when i write like this it gives me error , if you see i use my custom variable in MyButton.css in this manner it will adjust my button to any color i want.

// my jsx file

import React from "react";
import "./styles/MyButton.css";

const MyButton = ({ title, handelClick, color }) => {
  
  return (
    <div >
      <a  onClick={() => handelClick()} style={{ --my-custom: color }}>
        <span>{title}</span>
        <i></i>
      </a>
    </div>
  );
};

export default MyButton;

//MyButton.css

a.mybutton:hover {
  letter-spacing: 0.25em;
  background-color: var(--my-custom);
  box-shadow: 0 0 2.5em var(--my-custom);
  color: var(--my-custom);
}

CodePudding user response：

You can replace your style like this, it might works!

<div style={{ "--my-css-var": 10 } as React.CSSProperties} />

CodePudding user response：

Just use the inline styling without a .css file

import React from "react";

const MyButton = ({ title, handelClick, color }) => {

    return (
        <div className="parentbutton">
            <a className="mybutton" onClick={() => handelClick()} style={{
                backgroundColor: color,
                boxShadow: `0 0 2.5em ${color}`,
                color: color
            }}>
                <span>{title}</span>
                <i></i>
            </a>
        </div >
    );
};

export default MyButton;

CodePudding user response：

Firstly, you should use className instead of class, because class is a reserved keyword.

And you should surrender css variable name and value with quotes. You passing an object to styles property, and objects keys and values should follow certain rules.

import React from "react";
import "./styles/MyButton.css";

const MyButton = ({ title, handelClick, color }) => {
  
  return (
    <div className="parentbutton">
      <a className="mybutton" onClick={() => handelClick()} style={{ "--my-custom": "red" }}>
        <span>{title}</span>
      </a>
    </div>
  );
};

export default MyButton;