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>
Related
I have written the code for getting the URL param value
export class RedirectingComponent implements OnInit {
constructor(private activatedRoute: ActivatedRoute) { }
ngOnInit()
{
this.activatedRoute.paramMap.subscribe(params=>
{
let color=params.get('color');
console.log(color);
if(color)
{
if(color=='red')
{
//So If the color is red then we should apply red.css
}
}
})
}
}
Here are the css files
red.css
.my-container{
height: 100%;
background-color: red;
}
blue.css
.my-container{
height: 100%;
background-color: red;
}
Here is the Main Page
<mat-toolbar color="primary">
<span class="mainheading">Theme Changing</span>
</mat-toolbar>
<div class="my-container">
<h1 class="sideheading">URL that entered are processed for Theme Changing of the Page</h1>
</div>
Now I have to use the param value like color and change the background to the color mentioned like if the color mentioned is red the background should change in to red.
Note:Their should be different CSS files
You can't control header tags by angular directives.
You can create style tags and import different files in them. then control them by *ngIf directive.
<style type="text/css" *ngIf="rule1">
#import 'path\to\file-1';
</style>
<style type="text/css" *ngIf="rule2">
#import 'path\to\file-2';
</style>
Guys I have found a solution for this question
import { ActivatedRoute } from '#angular/router';
constructor(private activatedRoute: ActivatedRoute) { }
ngOnInit()
{
this.activatedRoute.paramMap.subscribe(params=>
{
let color=params.get('color');
console.log(color);
if(color)
{
if(color=="red")
{
loadCss("assets/styles/red.css");
console.log("This should be able to change to red color background");
}
else if(color=='blue')
{
loadCss("assets/styles/blue.css");
console.log("This should be able to change to Blue color background");
}
else if(color=='green')
{
loadCss("assets/styles/green.css");
console.log("This should be able to change to Green color background");
}
}
function loadCss(filename:any)
{
var fileref=document.createElement("link");
fileref.setAttribute("rel","stylesheet");
fileref.setAttribute("type","text/css");
fileref.setAttribute("href",filename);
if(typeof fileref!="undefined")
{
document.getElementsByTagName("head")[0].appendChild(fileref)
}
}
})
}
}
Main CSS Files
.mainheading
{
width: 100%;
text-align: center;
}
.sideheading{
padding-top: 20px;
color: white;
font-style:italic;
text-align:center ;
}
red.css
.my-container{
height: 100%;
background-color: red;
}
blue.css
.my-container{
height: 100%;
background-color: blue;
}
green.css
.my-container{
height: 100%;
background-color: green;
}
<mat-toolbar color="primary">
<span class="mainheading">Theme Changing</span>
</mat-toolbar>
<div id="theme" class="my-container" >
<h1 class="sideheading">
URL that entered are processed for Theme Changing of the Page
</h1>
</div>
Note:
Put the css files in assets/styles folder.
For getting the value from the url you should add the script in the app routing module
const routes: Routes = [
{
path:'redirecting/:color',component:RedirectingComponent
}];
Material-ui/ReactJS newbie question. I'm trying to show a pointer cursor when hovering over a Material-ui TextField but having a difficult time doing so. It makes use of 'cursor: text' by default. I've been able to successfully change the textfield background color on hover but adding "cursor: pointer !important" does no good. I've tried making use of className, class, style (inline), but I'm certain I'm not doing something correctly. Material-ui has a demo illustrating how to change textfield styling on hover and focused at [https://codesandbox.io/s/p7uwn?file=/demo.js][1] where I have also tried changing the cursor to a pointer on hover but still no luck. Any assistance would be greatly appreciated.
import React from 'react';
import styled from 'styled-components';
import { TextField, NoSsr } from '#material-ui/core';
const StyledTextField = styled(TextField)`
label.Mui-focused {
color: green;
}
.MuiOutlinedInput-root {
fieldset {
border-color: red;
}
&:hover fieldset {
border-color: yellow;
cursor: pointer !important;
}
&.Mui-focused fieldset {
border-color: green;
}
}
`;
export default function GlobalClassName() {
return (
<NoSsr>
<StyledTextField label="Deterministic" variant="outlined" id="deterministic-outlined-input" />
</NoSsr>
);
}
Just a quick browser inspection gave the CSS component we need to target. It's
.MuiOutlinedInput-input
Just giving it a
cursor: pointer;
property will solve your problem.
Here is the code:
import React from 'react';
import styled from 'styled-components';
import { TextField, NoSsr } from '#material-ui/core';
const StyledTextField = styled(TextField)`
label.Mui-focused {
color: green;
}
.MuiOutlinedInput-input {
cursor: pointer;
}
.MuiOutlinedInput-root {
fieldset {
border-color: red;
}
&:hover fieldset {
border-color: blue;
cursor: pointer;
}
&.Mui-focused fieldset {
border-color: green;
}
}
`;
export default function GlobalClassName() {
return (
<NoSsr>
<StyledTextField label="Deterministic" variant="outlined" id="deterministic-outlined-input" />
</NoSsr>
);
}
Or just literally put cursor:pointer into its css, either in-line as <Component style={{cursor: 'pointer'}}> or <Component sx={{cursor: 'pointer'}}> or in its styled component css. This will automatically change your mouse onHover, and the top answer here is way over the top. Just add cursor: 'pointer' to the component's css.
Using
<TextField sx={{ cursor: 'pointer' }} />
did not work for me, instead, I needed to specify it as
<TextField sx={{ input: { cursor: 'pointer' } }}
which did affect the desired change.
After I click on the button, it has the animation around the button. So I want to turn it off, I try to set CSS for element and Pseudo-classes but it's not working.
.ant-switch,
.ant-switch:focus,
.ant-switch:active {
border-color: white !important;
box-shadow: none !important;
outline: unset;
}
My code:
import React from 'react';
import { Switch } from 'antd';
import styled from 'styled-components';
const RSwitch = styled(Switch)`
background-color: ${props => props.backgroundcolor};
.ant-switch-handle::before {
background-color: #9b9b9b;
right: 0;
}
&[aria-checked='true'] {
.ant-switch-handle {
::before {
background-color: ${props => props.color};
}
}
}
`;
export default function SwitchComponent({
onChange,
checked,
color = '#00afdb',
backgroundColor = ''
}) {
return (
<RSwitch
onChange={onChange}
checked={checked}
size="small"
color={color}
backgroundcolor={backgroundColor}
/>
);
}
ant switch picture
HTML of switch
I fixed it with this solution
create a button.less file in your ant overrides and put this inside
[ant-click-animating-without-extra-node='true']::after{display:none;}
and it will work like a charm.
I realize it is just a div tag so I don't display it. If everybody has a better solution, please let me know.
.ant-click-animating-node {
display: none;
}
.ant-btn {
&::after {
all: unset;
}
}
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
I am making a simple component to test newest Lit-element a checkbox.
Upon testing static get styles only the first element I style is shown, I have seen in the documentation what I am trying should be correct, may I have some help?.
this is my component:
import {LitElement, html, css} from 'lit-element';
class CheckboxMJ extends LitElement {
static get properties(){
return{
check:{type:Boolean},
name:{type:String},
}
}
static get styles() {
return css`
.checkWrapper{
font-family: Roboto;
background-color: red;
font-weight: 500;
font-size:14px;
color:#283D3B;
border:none;
outline:none;
height: 150px;
width: 300px;
border-radius: 3px;
overflow:hidden;
padding:3px;
}
input[checkbox i]{
background-color:red;
}
`;
}
constructor(){
super();
this.check=false;
this.name="";
}
render() {
return html`
<div class="checkWrapper">
<input class="checkbox-mj" type="checkbox" name="${this.name}" value="${this.check}"> ${this.name}
</div>
`
}
}
customElements.define('checkbox-mj', CheckboxMJ);
I have been encountering this issue several times with other components, kept changing order, and names of classes until it worked but I feel so lost about how this should be done right, please somebody enlighten me on how to use this feature correctly.
You have to keep in mind that checkboxes are very difficult to stylize. Many properties simply have no effect on this input. On the other hand you have to use a standard css selector to stylize the checkbox input[type="checkbox"].
If you want the check property to be reflected in your checkbox you must do it this way:
?checked="${this.check}"
Look at this guides for more information https://lit-element.polymer-project.org/guide/templates (Bind properties to templated elements).
import {
LitElement,
html,
css
} from 'lit-element';
class CheckboxMJ extends LitElement {
static get properties() {
return {
check: {
type: Boolean
},
name: {
type: String
},
}
}
static get styles() {
return css `
.checkWrapper{
font-family: Roboto;
background-color: red;
font-weight: 500;
font-size:14px;
color:#283D3B;
border:none;
outline:none;
height: 150px;
width: 300px;
border-radius: 3px;
overflow:hidden;
padding:3px;
}
input[type="checkbox"]{
margin:1rem
}
`;
}
constructor() {
super();
this.check = true;
this.name = "Check";
}
render() {
return html `
<div class="checkWrapper">
<input class="checkbox-mj" type="checkbox" name="${this.name}" ?checked="${this.check}"> ${this.name}
</div>
`
}
}
customElements.define('checkbox-mj', CheckboxMJ);