Why is the styling for my React Datepicker so poor?

Question

I'm creating a web app and ios app simultaneously using react native via expo. I wanted to create a form that takes in a date. I use React's provided Datepicker, but I'm having issues with styling.

Code:

//import liraries
import { NavigationProp } from '@react-navigation/native';
import React, { Component, useState } from 'react';
import { View, Text, StyleSheet, Button, TextInput } from 'react-native';
import DatePicker from "react-datepicker";

interface RouterProps {
    navigation: NavigationProp<any, any>;
}

// create a component
const NewRenterForm = ( { navigation } : RouterProps) => {
    const [firstName, setFirstName] = useState('');
    const [lastName, setLastName] = useState('');
    const [dateStart, setDateStart] = useState(new Date());
    const [dateEnd, setDateEnd] = useState(new Date());
    const [current, setCurrent] = useState(false);
    const [rent, setRent] = useState(0);

    const submitFunc = () => {
        alert('Date Start: ' + dateStart);
        alert('Date End: ' + dateEnd);
        navigation.navigate("Home Detail");
    }
    
    return ( 
        <View style={styles.container}>
            <Text>NewRenterForm</Text>
            <TextInput value={firstName} style={styles.input} placeholder='First Name' autoCapitalize='none' onChangeText={(text) => setFirstName(text)} />
            <TextInput value={lastName} style={styles.input} placeholder='Last Name' autoCapitalize='none' onChangeText={(text) => setLastName(text)} />
            <DatePicker selected={dateStart} onChange={(date) => date && setDateStart(date)} />
            <DatePicker selected={dateEnd} onChange={(date) => date && setDateEnd(date)} />
            <Button onPress={submitFunc} title="Submit" color={'black'} />
        </View>
    );
};

// define your styles
const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#2c3e50',
    },
    input: {
        marginVertical: 4,
        height: 50,
        borderWidth: 1,
        borderRadius: 4,
        padding: 10,
        backgroundColor: '#fff'
    },
    calendar: {
        width: '100%'
    }
});

//make this component available to the app
export default NewRenterForm;

Picture of Poor Styling: Poor DatePicker Styling

Help would be appreciated in fixing the styling/

I attempted to change the width of the styling, and downloaded Chrome and opened the website in Chrome, but the styling error persisted.

Answer 1

You haven't targeted react-datepickers styles, so define some more. Use the inspector on chrome to investigate.

See for example the classes:

  .react-datepicker {
    font-family: var(--ff-body-font-family);
    color: var(--gray90);}

  .datetime-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: fit-content;}

  .react-datepicker__input-container {
    padding-left: 0;
    display: flex;
    width: 6rem;}

  .datetime-text-input-small {
    box-sizing: border-box;
    margin: 0;
    font-family: var(--ff-accent-font-family);
    color: red;
    font-size: var(--fs-accent-minimal);
    border: none;
    text-decoration: underline;
    width: 100%;}

  .datetime-text-input-small:hover, 
  .datetime-text-input-small:focus,
  .datetime-text-input-small:active {
    background-color: red;
    font-weight: 700;
    border: none;}