React Buttons not working, only using fallback styles - css

Question

I'm new to React, but following multiple guides I have an issue with buttons not selecting the correct style based on "checkButtonStyle", only rendering with the fallback options.
My code is:
(Button.jsx)
import React from 'react';
import './Button.css';
const STYLES = ['btn--primary', 'btn--light', 'btn--dark', 'btn--outline', 'btn--outline--light', 'btn--outline--dark'];
const SIZES = ['btn--medium', 'btn--large'];
export const Button = ({children, type, onClick, buttonStyle, buttonSize}) => {
const checkButtonStyle = STYLES.includes(buttonStyle) ? buttonStyle : STYLES[0];
const checkButtonSize = SIZES.includes(buttonSize) ? buttonSize : SIZES[0];
return (
<button className={'btn ${checkButtonStyle} ${checkButtonSize}'} onClick={onClick} type={type}>
{children}
</button>
)
};
(Button.css)
:root {
--primary: #EF1B71;
--light: #FFFFFF;
}
.btn {
font-family: 'Lato', sans-serif;
font-weight: 400;
border-radius: 4px;
cursor: pointer;
transition: 500ms ease;
}
.btn--primary {
background-color: var(--primary);
color: var(--light);
border: 1px solid var(--primary);
}
.btn--medium {
padding: 8px 20px;
}
(HeroSection)
import React from 'react';
import '../App.css';
import { Button } from './Button';
import './HeroSection.css';
function HeroSection() {
return (
<div className='hero-container'>
<video src='/videos/home-hero-video-2.mp4' autoPlay loop muted />
<div className="hero-btns">
<Button type='button' buttonStyle='btn--primary' buttonSize="btn--medium">Enquire</Button>
</div>
</div>
)
}
I have tried everything I can think of, with no errors showing in console for the button, however the only result I am getting is the .btn style within Button.css and not the btn--primary or btn--medium styles.
Thank you

Answer 1

className={
checkButtonSizes + " " + checkButtonStyle + " btn"}
You have to pass the variables in the format mentioned above to make it work. It works for me. Please try and let me know.

Answer 2

In JavaScript, it's possible to use variables in strings with a JavaScript template literal.
However, this requires the use of backticks (`) rather than single (') or double (") quotes.
This line uses single quotes rather than backticks. Thus, ${checkButtonStyle} and ${checkButtonSize} will be rendered as strings and not their assigned values.
<button className={'btn ${checkButtonStyle} ${checkButtonSize}'} onClick={onClick} type={type}>