Can you use es6 import alias syntax for React Components?

Your syntax is valid. JSX is syntax sugar for React.createElement(type) so as long as type is a valid React type, it can be used in JSX "tags". If Button is null, your import is not correct. Maybe Button is a default export from component-library. Try:

import {default as StyledButton} from "component-library";

The other possibility is your library is using commonjs exports i.e. module.exports = foo. In this case you can import like this:

import * as componentLibrary from "component-library";

Update

Since this is a popular answer, here a few more tidbits:

export default Button              -> import Button from './button'                                      const Button = require('./button').default         export const Button                -> import { Button } from './button'                                      const { Button } = require('./button')         export { Button }                  -> import { Button } from './button'                                      const { Button } = require('./button')         module.exports.Button              -> import { Button } from './button'                                      const { Button } = require('./button')module.exports.Button = Button     -> import { Button } from './button'                                      const { Button } = require('./button')module.exports = Button            -> import * as Button from './button'                                      const Button = require('./button')

Try to import this way

import {default as StyledLibrary} from 'component-library';

I suppose you export

export default StyledLibrary

Careful with capitalisation. Best to always CamelCase.

One:

import Thing from "component";

One with alias:

import {Thing as OtherThing} from "component";

One with alias plus other defaults:

import {Thing as OtherThing}, Stuff, Fluff from "component";

More detailed example

import{Thing as StyledButton},{Stuff as Stuffing},{Fluff as Fluffy},Wool,Cottonfrom "component";