using react-with-style to style a react-dates component

问题

I use a react-dates date picker in my site and recently updated to version 16 (from a pre-13 version). Since the new version has pretty different markup from the previous versions, my custom style sheets are irrelevant and instead of customising stylesheets again I would prefer to use the react-with-styles option of customising. The problem is, I can't seem to work out how it works and the documentation is a little unclear.

What I have now is basically this:

// Css file imported elsewhere
import 'react-dates/initialize';
import { SingleDatePicker } from 'react-dates';

export default class MyComponent extends Component {

    render() {

        return <div className="myWrapper">
            <SingleDatePicker
                ...
            />
        </div>
    }
}

This works, but requires me to customise a css file. Instead of this, I would like to use the react-with-styles to avoid having to import the css-file, but I can't seem to get that to work. I have looked at at https://github.com/airbnb/react-with-styles but just can't seem to get the hang of it.

This is what I have so far:

import ThemedStyleSheet from 'react-with-styles/lib/ThemedStyleSheet';
import aphroditeInterface from 'react-with-styles-interface-aphrodite';
import DefaultTheme from 'react-dates/lib/theme/DefaultTheme';
import {SingleDatePicker} from 'react-dates';
import { withStyles } from 'react-with-styles';

// Not sure what this does. Sets DefaultTheme + aphroditeInterface globally?
ThemedStyleSheet.registerTheme(DefaultTheme);
ThemedStyleSheet.registerInterface(aphroditeInterface);

class MyComponent extends Component {

    render() {

        return <div className="myWrapper">
            <SingleDatePicker
                ...
            />
        </div>
    }
}


export default withStyles(() => ({
    // Not sure what this part does
}))(MyComponent);

回答1:

If you registering your own Aphrodite interface, you need to import these in your root index file

import ThemedStyleSheet from 'react-with-styles/lib/ThemedStyleSheet';
import aphroditeInterface from 'react-with-styles-interface-aphrodite';
import DefaultTheme from 'react-dates/lib/theme/DefaultTheme';


ThemedStyleSheet.registerTheme(DefaultTheme);
ThemedStyleSheet.registerInterface(aphroditeInterface);

Then in your DatePicker Component do this:

Import React, {Component} from 'react'
import {SingleDatePicker} from 'react-dates';

class MyComponent extends Component {

    render() {

        return <div className="myWrapper">
            <SingleDatePicker
                ...
            />
        </div>
    }
}


export default MyComponent

Keep in mind, you should not need

import 'react-dates/initialize';
import 'react-dates/lib/css/_datepicker.css';

in your code (DatePicker) component if you're doing your own customization ;)

来源：https://stackoverflow.com/questions/48407492/using-react-with-style-to-style-a-react-dates-component

标签

reactjs

react-dates