I have two components, each with a CSS module:
src/_components/ProfileImage.tsx
import styles form './ProfileImage.module.scss';
function ProfileImage () {
return (
<img className={styles.profileImage} />
)
}
export default ProfileImage;
src/_components/ProfileImage.module.scss
.profileImage {
height: 50px;
width: 50px;
}
and
src/ProfilePage/Profile.tsx
import styles form './ProfilePage.module.scss';
function ProfilePage () {
return (
<ProfileImage className={styles.profileImage}
)
}
export default ProfilePage;
src/ProfilePage/Profile.module.scss
.profileImage {
composes: profileImage from '_components/ProfileImage.module.scss';
outline: 1px solid red;
}
This doesn't seem to work, not even when I use relative paths.
SCSS doens't recognise the property composes.
Is there a better way to compose modules than this? I am switching from CSS-in-JS to CSS modules, but I really miss how easy it was to compose components with emotion or styled-components.
in src/ProfilePage/Profile.module.scss
#import '/ProfileImage.module.scss' /* your ProfileImage scss file path */
.profileImage {
#extend .profileImage;
outline: 1px solid red;
}
this will work
Related
I'm working on a project which requires the following CSS code.
.hexagon, .hexagon::before, .hexagon::after {
width: 67px;
height: 116px;
border-radius: 18%/5%;
}
Is there a way to implement the above style using Material-UI makeStyles without separate use of before and after selectors?
You can use the below code, '&' means the generated class name that will be passed to the component
const useStyles = makeStyles({
root: {
"&, &:before, &:after": {
// your styles
}
}
});
<div className={classes.root}>
i created a basic react app like this:
import React from 'react';
import style from './Button.module.scss';
export default class Button extends React.Component {
render() {
return (
<button className={[style.class, 'awesome', 'great'].join(' ')}>
hello world
</button>
);
}
}
the css/scss:
.class {
background: pink;
color: red;
/* not working */
&:is(.awesome) {
border-width: 2px;
}
/* not working either */
&.awesome {
border-width: 2px;
}
/* works */
&:not(.great) {
border-style: dotted;
}
}
the problem:
the sublass .awesome is not working, whereas .great works fine.
Can you fix the code so the .awesome will work.
I need some subclass of the .button, so i can toggle them at runtime.
this is the generated css on the browser,
the .awesome is not generated but .great generated.
.Button_class__1tDJY:not(.Button_great__3yeAv) {
border-style: dotted;
}
.Button_class__1tDJY {
background: pink;
color: red;
}
you should pass the classes declared at your css modules through your styles object, instead of passing a string:
<button className={[styles.class, styles.awesome, styles.great].join(' ')}>
hello world
</button>
I'm using create-react-app with TypeScript template and trying to implement color variables as follows in a styles/colors.css file:
#value MainBlue: #255EDF;
#value MainOrange: #FF6F4A;
#value MainYellow: #FFD640;
When I go to import them (see below) in a CSS module they are not implementing.
#value MainYellow from '~styles/colors.css';
.homePage {
background-color: MainYellow;
text-align: center;
}
import styles from './homePage.module.css';
const HomePage = () => {
return (
<div className={styles.homePage}>Home</div>
);
};
export default HomePage;
What am I missing in order for these to be applied?
This syntax will do the job!
:root {
--MainBlue: #255EDF;
--MainOrange: #FF6F4A;
--MainYellow: #FFD640;
}
.homePage {
background-color: var(--MainYellow);
text-align: center;
}
<div class="homePage">Home</div>
in an Angular application I have a component with <ng-content></ng-content>. I added the scss rules for content that will be put inside the ng-content, but they are ignored. I tried to solve using :host, but it doesn't work.
https://stackblitz.com/edit/angular-ewqhzj
Wrapper component:
<app-embed>
<p>Hello world!</p><h1 class="toBeColored">toBeColored</h1>
</app-embed>
Styles in embed component:
:host {
border: 5px solid red;
padding: 15px;
display: block;
.toBeColored {
color: pink;
}
}
The problem is that the pink color of 'toBeColored' string is not set
Try this
:host ::ng-deep{
border: 5px solid red;
padding: 15px;
display: block;
.toBeColored {
color: pink !important;
}
}
and remove encapsulation statement and try ti build
encapsulation: ViewEncapsulation.Native
Try adding encapsulation: ViewEncapsulation.Native to your embed component like
import { Component, OnInit, ViewEncapsulation } from '#angular/core';
#Component({
selector: 'app-embed',
templateUrl: './embed.component.html',
styleUrls: ['./embed.component.scss'],
encapsulation: ViewEncapsulation.Native
})
export class EmbedComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
You can't achieve that with a clean way.
A workaround would be to create global css :
:host {
...;
::ng-deep .toBeColored {
color: pink;
}
}
But it will be deprecated. See this issue
::ng-deep is going to hold the web record for long-lived deprecated API.
You should be able to apply the styles in the parent component that projects the content into the ng-content tag. The angular styles isolation appears to consider the content to be part of the component where the HTML is declared.
https://stackblitz.com/edit/angular-ivy-q9dn68
So I'm just starting to learn React and I'm trying to incorporate a css file to style a react component (ie a sidebar) but I'm not sure why none of the styles show up on the webpage. I've tried inlining css in the index.js file and that works but I'm trying to move all of the styling code into a css file. I have a sass loader and css loader installed and included them in the webpack.config.js file. Am I just forgetting something dumb?
Here's my style.css file
.sidebar {
position: fixed;
height: 200px;
font-size: 20;
width: 60px;
background-color: deepskyblue;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: azure;
}
li {
display: block;
color: gray;
padding: 8px;
font-size: 20;
text-decoration: none;
}
li :hover {
background-color: forestgreen;
}
And my index.js file
import React from 'react'
import {styles} from './style.css'
import Home from './home.js'
export class Sidebar extends React.Component {
render() {
return (
<div className={styles.sidebar}>
<ul>
<li>Home</li>
<li>Test1</li>
<li>Test2</li>
</ul>
</div>
)
}
}
no need to call styles.sidebar as if it were an object, just import the file and assign className as an ordinary class....
import './style.css';
// [...]
<div className='sidebar'>
You mentioned you have CSSLoader in your webpack.config.js file. First, let's confirm that you have something similar to me:
{
module: {
rules: [
{
test: /\.css$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" }
]
}
]
}
}
Now, every time you run your webpack server, the dev bundle will include your styles in it. With that, you should be able to import css files my referencing them in the React file:
import './MyComponent.css'
const MyComponent = () => {...};
If everything is still the same, but things are still not working, I highly recommend create-react-app, which is a painless solution for you to focus on learning React without bothering so much with configuration details. Create React app includes amongst other things, CSS importing and Jest testing.