I am building a react project and having some issues with scss variables.
Firstly I am NOT using css modules so please don't suggest that as a solution.
Essentially I am including styles in the component folder, but I also have global shared styles that exist in an app folder called styles.scss this includes imports for the scss variables, mixins etc that i'd like to use in the component files. I'm having issues sharing the variables, I tried importing the styles into navigation.js is that the correct way to do it? I'd love some advice.
The folder structure is like this (it has to be this way as it is an existing project that I cannot change so please no suggestions for restructuring)
> components
> button
> navigation
> navigation.scss
> navigation.js
> carousel
> app
> scss
> settings
> mixin.scss
> variables.scss
> index.js
> styles.scss
Styles.scss
#import '/scss/settings/variables';
#import '/scss/settings/mixins';
Variables.scss
$black: #000;
$white: #fff;
$fontsize: 16px;
navigation.scss
#import '../../app/scss/settings/variables';
.nav {
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: nowrap;
justify-content: space-between;
position: relative;
background: $black;
color: $white;
}
Note: i'm using webpack to bundle my scss.
Related
I have 2 different pages and a .css file for each page. Both have a class selector with the same name, but only one of them is applied. I've only worked with react-native so far, and had both the content and the styling in the same file. I couldn't figure out what is happening...
Let's say we have the following css class:
.container {
display: flex;
align-items: center;
justify-content: center;
}
Even if the css file is not imported in one file, the class is applied to a div, if it's given in className.
For example, we have 2 files: CarPage.tsx and BikePage.tsx. The container class is imported in CarPage, but it's used in BikePage and it is applied. Does anyone know if this is how it should work?
In React, once CSS is imported, it will be "combined" and applied to the entire DOM. React uses CSS files as global scope.
In order to achieve locally scoped CSS, you will have to use:
CSS module
Create `[name].module.css` file then:
import React, { Component } from 'react';
import styles from './example.module.css';
class Example extends Component {
render() {
return <button className={styles.container }>Button</button>;
}
}
export default Example;
using libraries such as styled-components).
class Example extends Component {
const Button = styled.button`
background: transparent;
border-radius: 3px;
color: red;
margin: 0 1em;
padding: 0.25em 1em;
`
render(){
return <Button />
};
}
I'm working on a React project that uses MUI and Sass. Currently there are multiple scss-files full of !important to overwrite the MUI styles with sass. I tried to fix this by removing the !important's and adding:
import { StyledEngineProvider } from '#mui/material/styles';
import CssBaseline from '#mui/material/CssBaseline'
<CssBaseline />
<StyledEngineProvider injectFirst>
*** component tree here ***
</StyledEngineProvider>
as suggested here: Issue with #Mui and modularized scss competing intermittently. How to consistently override #mui default styling with scss modules?
Which seemed to work at first but stops working when you focus on a component. For example this button turns white with a blue border when hovered over:
scss
.button {
width: 250px;
height: 50px;
border: 1px solid grey;
border-radius: 15px;
text-transform: none;
}
.go-button {
#extend .button;
background-color: grey;
color: whitesmoke;
}
reactjs
<Button
className="go-button"
variant="outlined"
onClick={handleClick}
>
Go
</Button>
We are not using modules or makeStyles. What would be the best way to overwrite MUI without the !important's?
The default styles for many MUI components will include some styles for specific states like :hover, .Mui-focused that have a higher specificity than the styles of the default state. When overriding those styles you need to use the same specificity.
For instance, Button has default styles specific to hover, so you will need to specify style overrides for the hover state.
For example, here's one possible way to define your button styles:
.button {
width: 250px;
height: 50px;
border: 1px solid grey;
border-radius: 15px;
text-transform: none;
}
.go-button {
#extend .button;
background-color: grey;
color: whitesmoke;
}
.go-button:hover {
#extend .go-button;
background-color: #999;
}
According to my knowledge experience, you must use styled-components with MUI because they have a better pair rather then SCSS, with better pair you have better performance of the website & with styled-components you can easily modify the changes of MUI.
Visit this link for advanced usage
I use nextjs with rsuitejs.
in dev everything works fine.
after build the library css are not in the build directory,
so ugly page with no css.
i use css module with custom webpack config.
you can find the project here :
https://github.com/Temkit/rsuitejs-nextjs-example
i imported rsuitejs in the less file and it worked,
+ #import '~rsuite/styles/less/index';
h1 {
font-size: 25px;
font-weight: 600;
color: #424242cf !important;
padding-left: 12px;
}
the repository is correct now, if someone is facing the same problem check this example https://github.com/Temkit/rsuitejs-nextjs-example
thank you to simonguo
I just imported .css stylesheet in my component and the problem occured in generated file, it causes error like require.js:5 Uncaught Error: Script error for "src/Container.css", needed by: Container
folder structure
App
node-modules
src
Container.css
Container.jsx
dest
Container.css
Container.js
src - Container.jsx :
import './Container.css';
const Container = () => (
<div className="block"> // i know that here i can use like {style.block} if I do like import style from './Container.css';
<p className="message">Get started !!!</p>
</div>
);
ReactDOM.render(<Container />, document.getElementById('App'));
Container.css :
.block {
height: 100%;
margin-bottom: 0px;
box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 5px -3px;
background: rgb(255, 255, 255);
border-width: 1px;
border-style: solid;
border-color: rgb(221, 221, 221);
border-image: initial;
padding: 15px;
}
.message {
color: #413b3b;
font-size: 18px;
}
I'm not sure how to import Container.css in my Container.jsx file and make it work and I'm using grunt-babel to transpiling jsx to js and require.js
.
So I am clearly stating that I'm not using webpack and css-modules. I know using css-modules is a wise way, but not sure how to implement without webpack.
I have imported my css stylesheet in my component and it causes when I run my application.I have implemented inline styling that's works but i want to know is there's any better ways to accomplish this.
Thanks in advance.
import containerStyles from './Container.css';
First Solution --->
Write inside render() -
let cls_block = `${containerStyles.block}`;
In html section-
className={cls_block}
Second Solution --->
className={containerStyles.block}
Got solution still answering here, it will help some people who needs to work react with grunt and babel. If you need to import your css file in your component like
import './Container.css';
you need this plugin : https://github.com/guybedford/require-css
by using this you can import it like :
import 'css!./Button_Styles.css';
this answer for people who are using grunt and require , not webpack and css-modules.
Why: I am dissecting another developers code to learn React
Where this was found: In a React app: On GitHib
Folder Structure: components > Button
Files Contained: index.jsx & styles.scss
What I think it means: It seems pretty obvious to me that this locks the scss styling to the local folder (specifically the element with the attribute of styleName = Button). However, I'm confused because I cannot find any other reference to this technique anywhere online. The closest thing I can find are articles talking about :export and :import.
What dependency allows this to happen?
Is this native to Sass?
Is this created by the dev to serve a specific purpose?
...and other such clarifying questions.
:local(.Button) {
background-color: #fff;
border: 0;
border-radius: 5px;
cursor: pointer;
color: #27466E;
padding: 7px 12px;
&:hover {
opacity: 0.8;
}
&:disabled {
opacity: 0.5;
}
}