As a React beginner I'm currently struggling with it for rendering styled components with the use of pseudo elements ::after and ::before.
Here is the sass style for a button: https://jsfiddle.net/r8qwhfvx/
It is what I try to achieve in React: changing the style of my button on hover using pseudo elements.
But how to use ::after / ::before in the className of button components for instance? JSX syntax unable the use of ::after / ::before in the components className.
I'm just able to write this:
return(
<button className='infoBtn'></button>
);
Please check jsfiddle link.
className JSX attribute is a string variable, which will be set as the class attribute value on the HTML element when it will be rendered by React. CSS pseudo elements can appear in CSS code, not as a class name for a HTML element.
So you need to give a class name to your button using className JSX attribute, then define CSS rules for this class. To do so you need to choose a strategy to setup CSS in your React app. There is multiple solutions :
use a plain old CSS file imported in your index.js or index.html
use a plain old style element in your index.html (these 2 options are global, like in plain old 90's web development)
use JSX "style" attribute : <Component style={{here put CSS object}} /> : https://create-react-app.dev/docs/adding-a-css-modules-stylesheet/
use CSS modules (if you are using create-react-app) : https://create-react-app.dev/docs/adding-a-css-modules-stylesheet/
use styled-components or any other CSS-in-JS option, there is a lot of solutions, I mention styled-components since it is one of the most popular
With all of these options you will be able to use CSS pseudo-element. For SASS you may have to setup a CSS preprocessor. If you are using create-react-app (https://create-react-app.dev/docs/adding-a-sass-stylesheet/) or styled-components (https://styled-components.com/docs/faqs#can-i-nest-rules) you're good to go, it's build in. Well for styled-components I'm not sure if it is a true full SASS support though.
Good luck with that !
Related
Hello I am working on simple crud application in react js 18.0.0. My problem is I have my own styles for one component say eg..Home. But the styles which I have used for other components is also getting applied to Home component even though I did not imported it. Can anyone explain why?
I have attached an image for your reference.
In the above image I was in home component. But if you see the styles the container class in forgetPassword.css and login.css is also getting applied in home component. but In home component I did not imported those two css files(forgetPassword.css and login.css)
Yes this is because by default react does not support css or styles.
you can either use css modules(https://create-react-app.dev/docs/adding-a-css-modules-stylesheet/)
Or
Use styled components.
I suggest you to try the css modules as that will be beginner friendly and easy.
You need to move your css to seperate file and name it [filename].module.css
In your case Home.module.css
Then in your Home.js component import it like import styles from './Home.module.css'
Then in your component use it like
<div className={styles.container} > ... </div>
I also recommend you not to modify the original bootstrap classes, instead create your custom class and add the overrides there.
eg:
<div className={`${styles.container} ${styles.home-container}`} > ... </div>
The classes generated by styled components are : sc-igwadP, Is there any way I can customize it to be something like that? => Icon_sc-igwadP
It is possible with a Babel plugin: babel-plugin-styled-components.
One of the default options from this plugin makes CSS classes easier to identify:
Better debugging: This option enhances the attached CSS class name on each component with richer output to help identify your components in the DOM without React DevTools. In your page source you'll see: <button class="Button-asdf123 asdf123" /> instead of just <button class="asdf123" />.
More info here
I'm fairly new to React and started checking out React-Bootstrap and the way the components are styled. The documentation clearly styles components with variant:
<Button variant="primary">Success</Button>
However, this code seems to work just as well with the traditional className. Functionally, and aesthetically, if I change the above code to something like,
<Button className="bg-primary">Success</Button>
the output is the exact same. Personally, I find using the className attribute much easier as I can write vanilla bootstrap classes like btn btn-primary... instead of different react-bootstrap classes.
Is there any functional difference between the two and is there a reason to use variant over className?
The difference between variant and className:
Variant:
- uses only pre-defined classes
- no need for an external library
className:
- can use custom classes
- works the same as the HTML attribute class
I personally use className
I personally don't use React-Bootstrap, preferring to include the CDN to Bootstrap and apply classes to my own components using className.
As far as I can tell, there is no functional difference between both methods.
Variant is a prop for your React-Bootstrap components which wrap the various predefined styles for the different bootstrap components. You can't customise a React Bootstrap component using a variant(if you want to deviate from bootstrap's theme).
ClassNames are your normal CSS classes wherein you can add any style to components through CSS. The reason className="bg-primary" would work because React-Bootstrap has the bootstrap's css file included as part of the library.
this is the bootstrap Button Component:
const Button = props =>{
const variant = props.variant?`btn-${props.variant}`:""
return(
<button className={`btn ${variant} ${props.className}`}
onClick ={props.onClick}>
</button>
)
}
I am using Material UI for building my React Project.
However there is a component which has to be embedded to a different site. Meaning, I am providing the production build of this component to embed it to a different site.
My React app's css is getting overridden by the global styles defined in that website.
I don't want this behaviour. Is there any way I can isolate the css of my react app and the global css of the other website.
I saw this question but the solutions didn't help me.
If iframes and Web Components are out of the question, the only remaining option is CSS resets.
Create a CSS class and a series of rules that reset the styles of any elements that occur inside that class.
.my-reset {
/* Global resets (e.g. font family) */
}
.my-reset p {
/* Reset paragraph styles */
}
.my-reset label {
/* Reset label styles */
}
/* etc. */
Apply that class to the root-level component:
function MyApp() {
<div className="my-reset">
{ /* app goes here */ }
</div>
}
There are plenty of CSS reset libraries out there. Since you have no control over global styles, you're going to have to be heavy handed with the resets. So if it's at all possible, make your component embeddable as an iframe.
I see multiple solutions to this problem
Use !important in those styles possible.
Use id to give styling instead of class, as id has higher presidence.
If you give more specific styling to the elements then the build file css will override the outer site's css, i.e like if we write our css like .parent#child this is more specific styling and it will override the wrapper site's css.
Check this out https://stuffandnonsense.co.uk/archives/css_specificity_wars.html
There's another sort of scrappy solution that you could use in the case where you don't need the old table style and the new Material-UI tables on the same HTML page.
If you own the site that you are trying to embed the React app in (i.e., you have control over the new environment's CSS), another thing you could do to reset the CSS styles for the components in your app is to remove the classes that are overwriting your styles.
For example, if you're using Material-UI tables and your existing table styles are affecting the render, you could put the existing table styles into a separate CSS file that you only import when you render your existing tables, on another HTML page.
I am using StyledComponents in a React project, and I'm planning to overwriting the styles in Airbnb's react-dates library. They are using a CSS file with classes, but I want to overwrite their CSS using a wrapper component through StyledComponents (to keep my project consistent with not using CSS files).
Is this possible? I'm not finding anything on it.
Try to be as specific as possible and if necessary add the !important flag.
For example:
#TheID .theClassName .otherDIV .someDIV .divDIV .divitisDIV {
color: purple!important;
}