I'm currently facing a challenge in positioning this component differently on a specific page. Despite providing it with another className property, it seems to only take on the original class's styling that was assigned during the component declaration.
Component:
import React, { Component } from 'react';
import styles from './label.css';
class Label extends Component {
render() {
return (
<div className={styles.labelClass} />
);
}
}
export default Label;
Page where I want to adjust its position:
import React, { Component } from 'react';
import styles from './page.css';
import Label from '../common/label.jsx';
class Page extends Component {
render() {
return (
<div>
<Label className={styles.positionLeft} />
</div>
);
}
}
export default Page;
Typically, I would resolve this issue with custom styling, but due to the necessity of using media queries, this approach isn't feasible in this scenario.