How do I change the text color of the header and also for the content which is ant-collapse-content. I'm styling the AntCollapse using Styled and here's my code:
const StyledCollapse = styled(AntCollapse)`
&&& {
border: none;
border-radius: 0px;
box-shadow: none;
background: #0e0304;
}
.ant-collapse-content {
fontSize: 25px;
color: #fff;
}
.ant-collapse-header {
fontSize: 25px;
color: #fff;
}
`;
I tried using :global for both content and header but it didnt work as well.
try:
const StyledCollapse = styled(AntCollapse)`
&&& {
border: none;
border-radius: 0px;
box-shadow: none;
background: #0e0304;
}
&.ant-collapse-content {
fontSize: 25px;
color: #fff;
}
&.ant-collapse-header {
fontSize: 25px;
color: #fff;
}
`;
Related
I found the React CSS modules usefull, but having problem when I tried to reuse the same component with a little modified css I stuck. For example I created Neon glowing button, but now need to change only the width of the Button and some additional small changes in the css.
The only option I see is component without css and for every different case need to rewrite the whole css. Is there a smarter way?
import React from "react";
import styles from "./index.module.css";
import { Link } from "react-router-dom";
const GlowingButton = ({ title, path }) => {
return (
<div className={styles.buttonWrapper}>
<Link className={styles.button} to={path}>
<button className={styles["glow-on-hover"]}>{title}</button>
</Link>
</div>
);
};
export default GlowingButton;
And here is index.module.css
.buttonWrapper {
margin: 0px;
padding: 0px;
display: flex;
justify-content: center;
align-items: center;
background: transparent;
font-family: "consolas";
}
.button {
margin: 0;
padding: 0;
width: 80%;
height: 8vh;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
background: #100f;
text-decoration: none;
}
.glow-on-hover {
width: 400px;
height: 50px;
border: none;
outline: none;
color: #fff;
background: #111;
cursor: pointer;
position: relative;
z-index: 0;
border-radius: 10px;
}
.glow-on-hover:before {
content: "";
background: linear-gradient(
45deg,
#ff0000,
#ff7300,
#fffb00,
#48ff00,
#00ffd5,
#002bff,
#7a00ff,
#ff00c8,
#ff0000
);
position: absolute;
top: -2px;
left: -2px;
background-size: 400%;
z-index: -1;
filter: blur(5px);
width: calc(100% + 4px);
height: calc(100% + 4px);
animation: glowing 20s linear infinite;
opacity: 0;
transition: opacity 0.3s ease-in-out;
border-radius: 10px;
}
.glow-on-hover:active {
color: #000;
}
.glow-on-hover:active:after {
background: transparent;
}
.glow-on-hover:hover:before {
opacity: 1;
}
.glow-on-hover:after {
z-index: -1;
content: "";
position: absolute;
width: 100%;
height: 100%;
background: #111;
left: 0;
top: 0;
border-radius: 10px;
}
#keyframes glowing {
0% {
background-position: 0 0;
}
50% {
background-position: 400% 0;
}
100% {
background-position: 0 0;
}
}
So as i mentioned in the title when i am using styled component, I want to use ::after in my input and it does not work.. I put my code right below, so check it out
import styled from 'styled-components';
const Input = styled.input`
padding: 25px 80px;
border-radius: 100px;
margin: 15px 0px;
border: none;
border: 2px solid ${props => props.theme.colors.grey};
&:focus {
outline: none;
border: 2px solid ${props => props.theme.colors.main};
}
::after {
content: "hi"
}
`;
export default Input;
You can achieve it in the following way:
import styled from 'styled-components';
const div = styled.div`
padding: 25px 80px;
border-radius: 100px;
margin: 15px 0px;
border: none;
border: 2px solid ${props => props.theme.colors.grey};
&:focus {
outline: none;
border: 2px solid ${props => props.theme.colors.main};
}
&:after {
content: "hi"
}
`;
export default Input;
Input element doesn't allow the use of before and after pseudo classes
This is my first time using styledComponent.
Can someone tell me why my hover effect on SubmitBtn not working.
I just want to add hover effect on the submit button.
import styled from 'styled-components';
const SubmitBtn = styled.button`
width: 50%;
padding: 14px 20px;
margin: 8px 0;
display: inline-block;
border: none;
borderRadius: 4px;
cursor: pointer;
background: green;
color: white;
&:hover {
background: darkgreen;
color: grey;
}
`
<SubmitBtn>Submit Book</SubmitBtn>
I have taken the SubmitBtn out of component, and now it works.
You have to return/render the component.
import styled from 'styled-components';
const SubmitBtn = styled.button`
width: 50%;
padding: 14px 20px;
margin: 8px 0;
display: inline-block;
border: none;
borderRadius: 4px;
cursor: pointer;
background: green;
color: white;
&:hover {
background: darkgreen;
color: grey;
}
`
export const App = () => <SubmitBtn>Submit Book</SubmitBtn>
trying to use the TextComponent but I failed to style it as shown in the image below;
TextComponent username = new TextComponent().labelAndHint("UserNmae").constraint(TextField.ANY);
FontImage.setMaterialIcon(username.getField().getHintLabel(), FontImage.MATERIAL_PERSON);
The TextComponent doesn't allow for that particular design at the time. The round border is pretty easy:
TextField {
border: 1pt solid blue;
border-radius: 0.5mm;
padding: 2mm;
}
But the text overlay that sits on the border itself is problematic with the current API. This is probably something that can be enhanced by adding another on-top mode to the TextComponent that would use CENTER_BEHAVIOR_TOTAL_BELOW for the BorderLayout there.
However, at this time we recommend using a slightly different design e.g.:
TextComponent login = new TextComponent().
label("Login").
descriptionMessage("Enter your email").
constraint(TextArea.EMAILADDR).
action(MATERIAL_ARROW_FORWARD).
actionClick(e ->
SigninStep2Form.create().show());
The CSS is:
#Constants {
includeNativeBool: true;
scrollVisibleBool: false;
labelGap: 2;
textComponentOnTopBool: true;
textComponentAnimBool: false;
textCmpVAlignInt: 0;
textComponentFieldUIID: TextComponentField;
}
Form {
background: white;
}
TextComponentField {
background: #EDEDED;
padding-left: 1mm;
padding-bottom: 1.5mm;
padding-top: 0.5mm;
padding-left: 3mm;
margin: 0px;
font-family: "native:MainRegular";
font-size: 3mm;
color: black;
border: none;
border-bottom: 0.25mm solid #9a9a9a;
}
InputComponentAction {
padding: 1mm;
background: transparent;
border: none;
}
FloatingHint {
font-family: "native:MainRegular";
font-size: 2mm;
color: #5e5e5e;
margin: 0px;
padding-top: 1.5mm;
padding-right: 1mm;
padding-bottom: 0px;
padding-left: 3mm;
background: #EDEDED;
border-top-left-radius: 1mm;
border-top-right-radius: 1mm;
}
TextComponent {
background: white;
border: none;
padding: 1mm;
margin: 0px;
}
ErrorLabel {
padding-top: 0.5mm;
background: transparent;
padding-left: 3mm;
}
DescriptionLabel {
padding-top: 0.5mm;
padding-left: 3mm;
background: transparent;
}
The resulting text components look like this:
I have the following scss:
.skillBox {
position: relative;
border-radius: 10px;
border: 1px solid #ccc;
box-shadow: 0 2px 20px #ccc;
padding: 1em;
&:hover {
padding: 3em;
.d-none {
display: inline-block !important;
}
}
&:hover .d-none {
display: inline-block !important;
}
}
On hover, I get the padding:3em but both the nested, and inline child rule didn't work, ie .d-none class wasn't overridden.
What's the right way of writing the rule with CSS module?
I'm trying out CSS module with CRA and custom-react-scripts with sass and modules turned on (REACT_APP_SASS_MODULES=true).
Or perhaps I should use styled components instead? Was trying to figure out which one to go for for react apps.
you can try this code to solve your problem
.skillBox {
position: relative;
border-radius: 10px;
border: 1px solid #ccc;
box-shadow: 0 2px 20px #ccc;
padding: 3em;
background: red;
&:hover {
&.d-none {
background: black;
color: #fff;
padding: 20px;
}
}
}
.d-none {
background: green;
color: #fff;
padding: 20px;
}
<div class="skillBox">
Parrent
<div class="d-none">Childred</div>
</div>
Exmaple :: https://codepen.io/anon/pen/yqQNJXCodePen
There's nothing wrong with your CSS. See the demo below.
.skillBox {
position: relative;
border-radius: 10px;
border: 1px solid #ccc;
box-shadow: 0 2px 20px #ccc;
padding: 1em;
.d-none{
display: none;
}
&:hover {
padding: 3em;
.d-none {
display: inline-block;
}
}
}
https://codepen.io/paulcredmond/pen/djQoow
In case if element with skillbox and d-none class are siblings below is the css for that
.skillBox {
position: relative;
border-radius: 10px;
border: 1px solid #ccc;
box-shadow: 0 2px 20px #ccc;
padding: 1em;
&:hover {
padding: 3em;
}
}
.dnone {
display: none;
}
.skillBox:hover ~ .dnone {
display: inline-block;
}
http://jsbin.com/hixamotuku/edit?html,css,output
So I realise CSS Modules created a customised classname for .d-none and applying that classname worked.
So I changed the classname altogether making it an entirely new class that overrides .d-none.
.skillBox {
position: relative;
border-radius: 10px;
border: 1px solid #ccc;
box-shadow: 0 2px 20px #ccc;
padding: 1em;
&:hover {
.dNone {
display: inline-block !important;
}
}
}
And applying by adding them as an array then joining them together:
<i className={['fas fa-times-circle d-none', styles.faTimesCircle, styles.dNone].join(' ')} onClick={this.onDelete} />