I would like the content editor to define the primary colors of the website via Headless CMS,
using NextJS with preferable sass modules. Here is an example of it's purpose to give you an idea of what I'm trying to achieve
// style.module.scss
import fromHeadless './api/MyHeadlessCMS'
$color_primary: ${fromHeadless.primaryColor}
$color_secondary: ${fromHeadless.secondaryColor}
$color_text_body: #000;
.title{
color:$color_primary
}
.paragraph{
color:$color_text_body
}
See ${fromHeadless.primaryColor}
// Mycomponent
import style from 'style.module.scss'
const MyComponent = () => {
return(
<div>
<h1 className={style.title}>Hey hey</h1>
<p className={style.paragraph}>Something good</p>
</div>
)
}
export default MyComponent
So I know it is not possible to import js into a scss file, but I'm just trying find a solution with the outcome of using a dynamic scss/css variable defined outside of the sass file.
Related
Im building a react application which has two pages(two react components) so far. My main issue here is that for each component i want there to be an external css file for it, but once there are two css files one files over writes the code in the other. For example, I have a homepage class which has some html code and is being routed to by the App.js file. I want to style my homepage component with a css file called home_style, this works fine if there is only one css file. Once i create another css file for that for my other component, it overwrites the code for the first css file(home_style) and ends up being applied for both my components. I had the idea of having all the code in one css file and set ids for each html component to be able to reference it properly, but i want to know if there is a better way to accomplish this.
Importing different css files into your js file doesn't mean it will only affect this js file only. In React, A css file is global, so you need to encapsulate your css with a parent :
// component1.js
const Component1 = () => {
return (
<div className="component1">
<span className="red">This is the component 1</span>
</div>
)
}
// component2.js
const Component2 = () => {
return (
<div className="component2">
<span className="red">This is the component 2</span>
</div>
)
}
Here I use the same class red in my two components. So in my css, if I want these same classes to do different things, i'll need to encapsulate it (as you said) :
//component1.css
.component1 .red {
color: red;
}
// component2.css
.component2 .red {
background-color: red;
}
Importing my css files or just writing this in a global css file will work, but if you are looking for some other solution, you can ahve a look at Styled components or JSS (These are just examples, there is multiple solutions to manage css in React, like simply using SCSS for easier encapsulation).
I'm using the styled-components library to style my app. the problem that I got is when I've created a Container for example and I want to insert CSS inside it when I type font, it does not give me the properties list to choose from as I usually have in CSS (font-size,font-weight...), I should write all CSS properties by hands.
<-- app component-->
import styled from 'styled-components';
//styled Components
const AppContainer = styled.div`
CSS HERE
`;
function App() {
return (
<AppContainer>
<h1>Hello Gallery</h1>
</AppContainer>
);
}
export default App;
Should I install a VS extension to activate this option in my jsx file?
you can try using https://marketplace.visualstudio.com/items?itemName=jpoissonnier.vscode-styled-components for the autosuggesting and autocompletion of the styles.
I set up react-suneditor just as it said in the docs, using dynamic loading since I'm using Next.js.
import React from 'react';
import dynamic from "next/dynamic";
import 'suneditor/dist/css/suneditor.min.css'; // Import Sun Editor's CSS File
const SunEditor = dynamic(() => import("suneditor-react"), {
ssr: false,
});
const MyComponent = props => {
return (
<div>
<p> My Other Contents </p>
<SunEditor />
</div>
);
};
export default MyComponent;
And the rich text editor works and looks fine when developing on my macbook. However when I push to my server on Heroku it totally messes up the styling. I wonder if there is an issue when loading the css?
How it looks on development:
How it looks on server:
I made it work by importing source css instead of the dist one :
import 'suneditor/src/assets/css/suneditor.css'
But IMHO, this is just a workaround.
I suggest to open an issue on https://github.com/mkhstar/suneditor-react
I am using prime-react to style my React page. But I want a more compact website with very few padding and minimum styling. For this purpose, I want to override a few CSS properties for the prime-react components.
For eg, I am trying to reduce the padding for the MenuBar -
HomePage.js
import {React, Component } from 'react';
import { Menubar } from 'primereact/menubar';
import 'primereact/resources/themes/saga-blue/theme.css';
import 'primereact/resources/primereact.min.css';
import 'primeicons/primeicons.css';
import styled from "styled-components";
export default class HomeMenuBar extends Component {
// menu code ...
render() {
return (
<div>
<div className="card">
<Menubar model={this.items} className={this.props.className} />
</div>
</div>
);
}
}
const ComponentView = styled(HomeMenuBar)`
.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link {
padding: 0.1rem 1rem !important;
}
`;
The above code makes no difference to the original styling.
I am trying to make use of this component.
However, particularly using these styled-components I don't like it. I am new to react and would like to know if there are better alternatives like, storing the CSS properties in another file and then importing it in the required file. I tried this part but it also didn't work out.
I work with react over a year and have seen lot of different ways to customise components and so far, I think that styled-components is the most convenient way to customize components if you cook them right.
I love to put all customized components with styled to a separate file near the index.js called styled.js of Component.js and Componnet.styled.js (in the separate folder of course MyComponent/index.js);
In styled.js you export all components like this:
export const Container = styled.div`
.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link {
padding: 0.1rem 1rem !important;
}
`
In index.js file you inport them like this:
import {Container} from './styled'
// or import * as Styled from './styled' (if you have a lot of customized components);
export default class HomeMenuBar extends Component {
// menu code ...
render() {
return (
<Container>
<div className="card">
<Menubar model={this.items} className={this.props.className} />
</div>
</Container>
);
}
}
If you want to try something more like classic css try to look at css-modules.
This article can help https://www.triplet.fi/blog/practical-guide-to-react-and-css-modules/
You can also try patch-styles, a more declarative way to apply CSS/SCSS modules to your code. Also, check out the StackBlitz example.
My CSS files work fine when I just use the element names like this:
div {
background-color: blue;
}
But when I use className to identify that div, the CSS is ignored, like this:
.containerInner {
background-color: blue;
}
Here is the js file, so you can see how I'm using className:
import React, { Component } from 'react'
import styles from './Game.css'
import GameContainer from './GameContainer/GameContainer.js'
class Game extends React.Component {
render() {
return (
<div className={styles.containerOuter}>
<div className={styles.containerInner}>
<h1 className={styles.header}>MEMORY</h1>
<GameContainer />
</div>
</div>
)
}
}
export default Game
Notes:
1. I am using create-react-app.
2. I am not using modular css like sass. I'm just using raw css.
3. This is a problem throughout my entire project, not just a couple files
4. There are no error messages in Chrome, or in the terminal
This is the same issue on Stack Overflow, but it does not appear to have been resolved on the thread, and the comments did not lead me to a solution. CSS class selector styles not being applied in React Project
Any ideas? Thanks in advance
If you want to apply a class name to a class, just apply the name. Class names are strings, not objects;
<div className="containerInner">