import {InlineStyledDropzone, StyledComponentsDropzone} from "../../components/examples";

Styling the dropzone

The hook doesn't set any styles on either of the prop fns (getRootProps() / getInputProps()) — you're in full control.

Using inline styles

tsx

const baseStyle =;
const focusedStyle = {borderColor: "#2196f3"};
const acceptStyle = {borderColor: "#00e676"};
const rejectStyle = {borderColor: "#ff1744"};

function StyledDropzone() {
  const {getRootProps, getInputProps, isFocused, isDragAccept, isDragReject} = useDropzone({
    accept: {"image/*": []}
  });

  const style = useMemo(
    () => ({
      ...baseStyle,
      ...(isFocused ? focusedStyle : {}),
      ...(isDragAccept ? acceptStyle : {}),
      ...(isDragReject ? rejectStyle : {})
    }),
    [isFocused, isDragAccept, isDragReject]
  );

  return (
    <div {...getRootProps({style})}>
      <input {...getInputProps()} />
      <p>Drag 'n' drop some files here, or click to select files</p>
    </div>
  );
}

Using styled-components

tsx

import styled from "styled-components";

const getColor = props => {
  if (props.isDragAccept) return "#00e676";
  if (props.isDragReject) return "#ff1744";
  if (props.isFocused) return "#2196f3";
  return "#eeeeee";
};

const Container = styled.div`
  /* ... */
  border-color: ${props => getColor(props)};
`;

function StyledDropzone() {
  const {getRootProps, getInputProps, isFocused, isDragAccept, isDragReject} = useDropzone({
    accept: {"image/*": []}
  });
  return (
    <Container {...getRootProps({isFocused, isDragAccept, isDragReject})}>
      <input {...getInputProps()} />
      <p>Drag 'n' drop some files here, or click to select files</p>
    </Container>
  );
}