CODEWITHSUNDEEP
javascriptreactjs
Looser
Looser

Reputation: 81

Rsuite not working properly how to fix? ReactJS

Hello everyone i installed rsuite through npm i rsuite and imported import "rsuite/dist/styles/rsuite-default.css". The thing is that buttons or default text inputs works perferctly , but when i use a select or date picker or whatever has to do with a pop up or a collapse they dont show me the data. Like if i click on a select component it does not show me the option even if i can go trhough them and select ! but they are invisible.

Thats my code :

import { Container, Row, Col } from 'reactstrap'
import { DatePicker } from 'rsuite';
import "rsuite/dist/styles/rsuite-default.css"


export default class Forms extends Component {
    constructor(props){
        super(props)
        this.state={
        }
    }

    render() {
        return (
            <div>
                <Container fluid>
                    <Row className="Col_margin py-4 px-1">
                         <Col className="Col_margin px-1" md={6}>
                            <label>name</label>
                            <DatePicker block/>
                         </Col>
                    </Row>
                    
                </Container>
                
            </div>
        )
    }
}```

THATS HOW IT SHOWS TO ME , I CAN CLICK ON IT AND CHOOSE THE DATE BUT I DONT SEE NOTHING, I KINDA CHOSED BLIND Thats how it is mine, i can select but i completely dont see what im clicking

THATS HOW IT SHOULD BE , SHOWING THE DATE OPTIONS AND THE BUTTON OK Thats how it should be showing the numbers and the button ok

I want to tell you that in the first image the date table does not appear visible but is there , like if i move the mouse and click randomly the date appear on the form but it just not show, idk how to show to you because it just not there xD

Upvotes: 1

Views: 4713

Answers (2)

Yassine Yahyaoui
Yassine Yahyaoui

Reputation: 46

You just need to import the styling that follows the rsuite package:

import "rsuite/dist/rsuite.min.css";

Upvotes: 3

nishit chittora
nishit chittora

Reputation: 1034

I would suggest testing your code in a sandbox. I have created codesandbox link. It might be some other possible reason.

import React, { Component } from "react";
import { Container, Row, Col } from "reactstrap";
import { DatePicker } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default class Forms extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    return (
      <div>
        <Container fluid>
          <Row className="Col_margin py-4 px-1">
            <Col className="Col_margin px-1" md={6}>
              <label>name</label>
              <DatePicker block />
            </Col>
          </Row>
        </Container>
      </div>
    );
  }
}

Output:

enter image description here

Upvotes: 1

Related Questions