I'm trying to test if an element has the proper styles. However this only works when I add inline styling to the element. I'm also using css modules, so I'm not sure if that is the problem.
The test
test("3.1.2.if the nav link opens properly", () => {
render(
<Router>
<Header />
</Router>
);
const nav = screen.getByRole("navigation");
expect(nav.style).toHaveProperty("transform", "rotate(0)")
});
(Relevant) JSX
<div
className={`${styles.options} ${
dropdownOpened ? styles.options__dropdown__open : ""
}`}
onClick={handleDropdown}
role="navigation"
>
<IconContext.Provider
value={{
color: "white",
className: styles.options__dropdown__btn,
}}
>
<IoMdArrowDropdown />
</IconContext.Provider>
</div>
(Relevant) CSS
.options:not(.options__menu__opened, .options__dropdown__open) {
transform: rotate(0);
}
You may try to use window.getComputedStyle, see also #testing-library/dom window.getComputedStyle "Not implemented" error even after setting computedStyleSupportsPseudoElements: true
Related
I'm stuck with this bootstrap Navbar.
this is my Navbar that I use from bootstrap library.
<Navbar bg = "transparent" className = "me-auto" expand = "lg" sticky='top' collapseOnSelect>
<Container>
<Navbar.Brand href="#home">
<img
alt=""
src={navBarLogo}
height = "40"
className="d-inline-block align-top"
/>{' '}
</Navbar.Brand>
<Navbar.Toggle/>
<Navbar.Collapse id="responsive-navbar-nav" style = {{"justifyContent": "right"}}>
{/* TODO: refractor css later */}
<Nav activeKey={navKey} onSelect={(selectedKey) => {setNavKey(selectedKey);}}>
<Nav.Link href = "#nhan-qua-tang" eventKey = "receiveGift" className = "active_nav_link"> Receive Gift</Nav.Link>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
this is my CSS style that I want to apply
.inactive_nav_link {
color: #6E7171;
}
.active_nav_link {
color: #4FBA69
}
As I see in the console that my Nav.Link style is overriddened by the default className of bootstrap's Nav.Link.
How can I apply my own className to this Nav.Link?
You can use a more specific rule as described in "Instead of using !important" in this mdn css Specificity guide.
Changing:
.inactive_nav_link {
color: #6E7171;
}
.active_nav_link {
color: #4FBA69;
}
To:
.navbar-light .navbar-nav .nav-link.inactive_nav_link {
color: #6E7171;
}
.navbar-light .navbar-nav .nav-link.active_nav_link {
color: #4FBA69
}
Tested on React Bootstrap Navbars page
I've just implemented the react material ui carousel, and it was pretty straightforward, the only thing i didn't catch, is how to hide buttons and show them only on over.
I noticed the props navButtonsAlwaysVisible and set it to false but it isn't enough.
Should i implement my own logic for that, or maybe I'm just missing something?
here's the component code:
import styles from '../../styles/Testimonial.module.scss'
import Image from 'next/image'
import Carousel from 'react-material-ui-carousel'
const Testimonial = _ => {
const items = [
{
imageUrl: "/png/image0.webp",
feedback: "feedback0",
name: "name0",
location: "location0"
},
{
imageUrl: "/png/image1.jpeg",
feedback: "feedback1",
name: "name1",
location: "location1"
}
]
return (
<div id="customers" className={`section ${styles.testimonial}`}>
<h2 className={`title ${styles.title}`}>Clientes Felizes</h2>
<span className={"separator"}> </span>
<Carousel
className={styles.carousel}
autoPlay={true}
stopAutoPlayOnHover={true}
interval={5000}
animation={"slide"}
swipe={true}
navButtonsAlwaysVisible={false}
navButtonsProps={{
style: {
backgroundColor: "#8f34eb",
opacity: 0.4
}
}}
>
{
items.map( (item, i) => <Item key={i} item={item} /> )
}
</Carousel>
</div>
)
}
function Item(props)
{
return (
<article className={styles.testimonial__card}>
<div className={styles.testimonial__photo_container}>
<Image
className={styles.testimonial__photo}
src={props.item.imageUrl}
alt="Testimonial"
width={312}
height={300}
/>
</div>
<p className={styles.testimonial__copy}>{props.item.feedback}</p>
<span className={styles.testimonial__name}>{props.item.name}</span>
<span className={styles.testimonial__city}>{props.item.location}</span>
</article>
)
}
export default Testimonial;
there's a prop called navButtonsAlwaysInvisible
navButtonsAlwaysInvisible={true}
You can try using Custom CSS for your purpose. Based on the current rendered markup,
.jss6 {
opacity: 0;
transition: all ease 1000ms; /* So that it does not disappear quickly */
}
You can define the hover for the parent so that it displays only when the parent container is hovered on:
.jss1.Testimonial_carousel__3rny3:hover .jss6 {
opacity: 1;
}
This is how it works now:
I am trying to render some links using ReactMarkdown in a React component, which needs some props to be passed to use special styling.
Links is my styled component which I am applying to paragraph property under renderers in ReactMarkdown. However Links to work I need to pass linkColor={linkcColor} props.
Code: Part of my code is where Container is another styled.div
<Container>
{websites.map((website, index) => (
<div key={'website' + index}>
<ReactMarkdown
source={`[${website.websiteName}](${website.externalUrl})`}
unwrapDisallowed={true}
renderers={{ paragraph: Links, link: Linkrender }}
/>
</div>
))}
</Container>
const Links = styled.div`
color: ${(p) => p.linkColor};
::before {
content: ' ';
white-space: pre;
}
::after {
content: ' /';
white-space: pre;
}
`;
Tried: The following. But it hasn't worked. It loses the source for ReactMarkdown completely and just style is applied to empty div.
<ReactMarkdown
source={`[${website.websiteName}](${website.externalUrl})`}
unwrapDisallowed={true}
renderers={{ paragraph: ({linkColor}) => (
<Links {...linkColor={linkColor}} />), <<<<<<<<<<<<< tried this
link: Linkrender }}
/>
Is the syntax correct? What could be the reason for this not to work? Is it because my styled component is a div which is getting applied on a <p>? Here Linkrender is another styled component custom made which is <a>, and that I can't change.
One way that worked was applying a styled.div as a wrapper and apply a specific styling to the paragrah in ReactMarkdown. Look at the arrows inside the code that explains what to do.
<Container>
<Heading>{`${textStripeHeading}:`}</Heading>
{websites.map((website, index) => (
<Links key={'website' + index} linkColor={linkColor}> <<<<<<<<<<< add <Links> here
<ReactMarkdown
source={`[${website.websiteName}](${website.externalUrl})`}
unwrapDisallowed={true}
renderers={{ paragraph: MarkdownStyle, link: Linkrender }} <<<<<<<<< create new style.p with style and apply to paragraph
/>
</Links>
))}
</Container>
const MarkdownStyle = styled.p`
::before {
content: ' ';
white-space: pre;
}
::after {
content: ' /';
white-space: pre;
}
`;
This is just one solution that worked. I am waiting for others to offer better solution.
My fullscreen modal is aligned to the left. Centered property does not solve it. I have a row of the grid that dynamically displays a series of Cards. Each Card has the modal associated, so when you click the Card the modal opens with information from the Card.
This is the grid where i render it
<Grid.Column key={this.props.sensorid} width={4}>
<Card
onClick={() => {
this.setState({ modalOpen: true });
}}
color={color}
header={String(porce) + " %"}
description={this.props.sensorname}
meta={nivelUno + " mm"}
/>
<ModalSensor
sensorWell={this.props.sensorWell}
sensorName={this.props.sensorConPrefijo}
sensorId = {this.props.sensorid}
modalOpen={this.state.modalOpen}
handleClose={() => {
this.setState({ modalOpen: false });
}}
/>
</Grid.Column>
This is the modal
export default class ModalSensor extends Component {
render() {
return (
<div>
<Modal
centered={true}
open={this.props.modalOpen}
onClose={this.props.handleClose}
closeOnEscape={true}
size={"Fullscreen"}
>
<Modal.Header>Nivel del sensor {this.props.sensorName}</Modal.Header>
<Modal.Content>
<Sensor sensorwell={this.props.sensorWell} sensorcodigo={this.props.sensorName}/>
</Modal.Content>
<Modal.Actions>
<Button
inverted
color="orange"
type="button"
icon="checkmark"
labelPosition="right"
onClick={this.props.handleClose}
content="Cerrar"
/>
</Modal.Actions>
</Modal>
</div>
);
}
}
that's a common problem when using more than one css library just inspect your element with your browser dev tool and try to figure it out or else past it here None can help you (probably) because it's a css problem and you haven't any css here.
Good luck man.
I've also encountered this type of layout bug, but I fixed it by adding a custom class to <div class="ui fullscreen modal transition visible active" />
.customClass {
left: 50%;
transform: translateX(-50%);
}
I am using react strap to help style an application I'm creating, however I can't figure out how to change the background color of the nav from white to black. I have tried to color ="dark" in the nav tabs tag but that hasn't work. Any help?
import React, { Component } from 'react';
import { Nav, NavItem, Dropdown, DropdownItem, DropdownToggle, DropdownMenu, NavLink } from 'reactstrap';
export default class nav extends React.Component{
constructor(props) {
super(props);
this.toggle = this.toggle.bind(this);
this.state = {
dropdownOpen: false
};
}
toggle() {
this.setState({
dropdownOpen: !this.state.dropdownOpen
});
}
render() {
return (
<div>
<Nav tabs>
<NavItem>
<NavLink href="/" active>blank.</NavLink>
</NavItem>
<Dropdown nav isOpen={this.state.dropdownOpen} toggle={this.toggle}>
<DropdownToggle nav caret>
Dropdown
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</Dropdown>
<NavItem>
<NavLink href="#">Link</NavLink>
</NavItem>
<NavItem>
<NavLink href="#">Another Link</NavLink>
</NavItem>
<NavItem>
<NavLink href="#">Disabled Link</NavLink>
</NavItem>
</Nav>
</div>
);
}
}
reactstrap doesn't have clear documentation, so I only see here 2 options:
Just use inline styles in the components
<Nav style={{backgroundColor: '#f1f1f1'}}>Something</Nav>
Or use css-modules through
import styles from './Component.module.css'
<Nav className={styles.Component}>Something</Nav>
where you define your ctyles in css
.Component{
background-color: #f1f1f1
}
Note: css-modules sometimes is not enough to override bootstrap styling, but inline styles should help
Utility classes still work with reactstrap. Just use className='bg-dark' on the parent element, and you'll get your dark background.
An approach using styled-components:
const MastHeadJumboTron = styled.div`
&.jumbotron {
background: #000;
}
`;
const MastHead = () => (
<Jumbotron as={MastHeadJumboTron} fluid>
<Container>
<h1>May the force be with you!</h1>
<input placeholder="Filter People" />
</Container>
</Jumbotron>
);
You can create a class with your custom css and mark them !important. Thus over-riding the default styling.
.custom-btn {
background: #000 !important;
}
According to the documentation, for AvField as Input, there are props like inputClass and labelClass that helps you to manage styling for text-box and label respectively.
<AvField
name="member_name"
label="Team Member Name"
inputClass="bg-gradient-primary"
type="text"
placeholder="Name of Team Member"
onChange={this.handleChange}
/>
And for Input Component, you can use className and cssModule for styling purpose.