Complete the code to create a base component in Figma.
const BaseComponent = () => {
return <div className=[1]>Base Component</div>;
};The base component should use the class base-style to apply the foundational styles.
Complete the code to extend the base component with additional styles.
const ExtendedComponent = () => {
return <div className=[1]>Extended Component</div>;
};The extended component combines base-style and extended-style to build upon the base styles.
Fix the error in the component to correctly apply the base styles.
const Component = () => {
return <div className=[1]>Component</div>;
};CSS class names should use hyphenated lowercase format like base-style to match the CSS definition.
Fill both blanks to create a reusable base component with props.
const BaseComponent = ({ children, className }) => {
return <div className=[1] + ' ' + [2]>{children}</div>;
};The base component uses the fixed class 'base-style' combined with the dynamic className prop for flexibility.
Fill all three blanks to create a styled base component with conditional class names.
const BaseComponent = ({ isActive, children }) => {
const baseClass = [1];
const activeClass = isActive ? [2] : '';
return <div className={`${baseClass} ${activeClass} [3]`}>{children}</div>;
};The base class is 'base-style', the active class is 'active-style' when isActive is true, and 'custom-style' is added for extra styling.